From d5927bea53f2a27d0ecdc3ae8b33aa7926eb69f4 Mon Sep 17 00:00:00 2001 From: Demavend Date: Tue, 22 Aug 2017 13:17:17 +0300 Subject: [PATCH 1/9] Init new branch --- .gitignore | 2 ++ package.json | 19 +++++++++++++++++++ 2 files changed, 21 insertions(+) create mode 100644 .gitignore create mode 100644 package.json 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/package.json b/package.json new file mode 100644 index 0000000..ba1dfa9 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "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" +} From 1885285e631a12c478aecb6016f52bee879f71ea Mon Sep 17 00:00:00 2001 From: Demavend Date: Tue, 22 Aug 2017 13:41:37 +0300 Subject: [PATCH 2/9] Init new libraries --- index.html | 5 ++++- package.json | 7 ++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index dee98c8..9e2c805 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,10 @@ E-book library - + + + + diff --git a/package.json b/package.json index ba1dfa9..28d8c44 100644 --- a/package.json +++ b/package.json @@ -15,5 +15,10 @@ "bugs": { "url": "https://github.com/Demavend/e-library-backbone-sample/issues" }, - "homepage": "https://github.com/Demavend/e-library-backbone-sample#readme" + "homepage": "https://github.com/Demavend/e-library-backbone-sample#readme", + "dependencies": { + "backbone": "^1.3.3", + "jquery": "^3.2.1", + "underscore": "^1.8.3" + } } From be171945e0bb4c79aff352c5e84ba228fe0d5095 Mon Sep 17 00:00:00 2001 From: Demavend Date: Thu, 24 Aug 2017 13:16:58 +0300 Subject: [PATCH 3/9] Create empty boockshelf --- css/style.css | 30 ++++++++++++++++++++++++ i/Cover.gif | Bin 0 -> 2148 bytes index.html | 16 ++++++++----- index.js | 0 js/index.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + style.css | 0 7 files changed, 103 insertions(+), 6 deletions(-) create mode 100644 css/style.css create mode 100644 i/Cover.gif delete mode 100644 index.js create mode 100644 js/index.js delete mode 100644 style.css 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 0000000000000000000000000000000000000000..7e84a7955a53dc110a59a41496279ea1b5e0d9ab GIT binary patch literal 2148 zcmV-q2%GmuNk%w1VL1R$0M!5hb7WeUjfzn)BxY1kfMZ2iOiEZfFk??iLmv~3f_`aC zGfgTSI~)-|9}{|9KVwBLOC=aJ7YDU|do;CY_a&cxqy3Syf?2K7(jWRWvGzZBKGvS$<(dTR=8@UqLz;4qHAde_uX+ zacy5eDuZ`)aAROU8W4+cQcf!%Js1rn1_C)64^Jx}g=t_X%RWA=tIW=v(Yw68e*%G~goZ!F%J0R<#jDM?&^Wu**6QoQ z3*PaF_m0>xL<4^uV&&uBvnwS+@w;{kl`BL(;texKEMdJKweVfhCkkDGO?hi5h4)mc%33FYKVaV0U$`DLPpLr&reJ8;1*^U zUKmM>FJg%xZwtgiqbrGNMp$d|XeJ-OVf z{C0cYWvxoA!^G;IOo0L^_rP+zgi5%ZqyRn(9ltp{f-cDcUu!YY1L*KV%X20?sBSxu z`QDvm`Y`R&)aD@d)DsM_!PTpR$rOXF_0Vvchvq4*#7+mC0}Vf?y#w3ty%e)g;40+; z3oIzGfB+9HdbcGdOU*acf48hulQ5(9O@KZu;J^YTIDj|_I0xIv&QABdci(Ea(DGY@ zDs!}Zi!H$a!DXu4*)-IsM_uvce!G4GfW}-T=*Ria?6@T8?p$`ozq7uB>uu+#(XU@a z>}#-jH-B~x4XCgJ)jWW}LEB;)#v87kb-k$FKq}Jw{NIN^zTf6opBuED38+1WRN`Ia zo(H|~vCan|m_hY6QWq(SZ3p-YnTn<*Km?Sn0TpY2{V10}0uYFStDqh2-e;zWQR`I} zw4e^aS3vPm%?AKbpvE-P9$=BhSpbR_-q5A4o@o$#4Y0xe2H*n|ETC;X*%y1H#RF$y zCSsNFUbU{J!72*zg+@f*e)9F63+3rO=c0tQqUOUYZZK^{JYp9;hA-?*P-NYs81&`{ z#45V~Fl|4`V&GEa#7;d>RVK=y88JA>21Hu(|YGUshO;h7z82%mU+kr>=FXLge2$q1w{c?YlUpX>*X>%;h(qd4L}L(tTnhp)4giN|U{_it&^uIDb%24-yDFcp?xS z`KiK+*%Fxz2xtT(08VjU;Fr2{+^;4^%Q;#LqTF1j4Qwz`a9*IGtZJ1GUFEzfVsnoF z$Yel7M@rL@((|IO>{q!OVNHsCuaprDC{0O9(OnYMo;g*hxgbHz`N0&XAq^-4MjC+# zXrQRPM5$7j8i}S}6RNnB>QqT;Rji5=sa@kLPv=L!0unN)K^5s(sajT(YE@*e+5uaq z=+jcH&VTh*#wb)b^1 z1V^EULTvgIsDE{=U_EQrf--`q0(4qpv-wZPGP9~=?JQ)^YS7col71GXZ6Rg4+12Xy zvxFspX!lA+AokUaLVc`mJF5W?R5Y}-EaqvSYumZzcDkOm?k-Q-gA>HyyfjFGZw%7Q zUK*(2z3=U8e8Fo~4cPa-_|2~dY9QXoZlDAeP=J63OyB|!I0Fbyu!0xN;09;l0V!BP z0S_4ziGk>|+oF0RTI9SjlJr literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 9e2c805..555e543 100644 --- a/index.html +++ b/index.html @@ -4,16 +4,20 @@ E-book library - + + + - - - + + - - + + + + + diff --git a/index.js b/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/js/index.js b/js/index.js new file mode 100644 index 0000000..e41e4a3 --- /dev/null +++ b/js/index.js @@ -0,0 +1,62 @@ +let 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' + } +}); +let template = `

<%=title%>` + + `

<%=description%>` + + `

`; + +let BookCollection = Backbone.Collection.extend({ + model: Book +}); +let Library = Backbone.Collection.extend({ + model: Book +}); +let ContainerView = Backbone.View.extend({ + initialize: function() {}, + template: _.template(template), + tagName: 'div', + className: 'panel panel-success', + initialize: function() { + this.render(); + }, + render: function() { + this.$el.html(this.template(this.model.toJSON())); + return this; + }, +}); +let BookshelfView = Backbone.View.extend({ + tagName: 'div', + className: 'panel-group', + initialize: function() {}, + render: function() { + this.collection.forEach((book) => { + let View = new ContainerView({ + model: book + }); + this.$el.append(View.render().el); + }, this); + return this; + } + +}); + + +let library = []; +for (let i = 0; i < 10; i++) { + let book = new Book; + library.push(book); +} +let bookshelf = new BookshelfView({ + collection: library +}); +$('body').append(bookshelf.render().el); diff --git a/package.json b/package.json index 28d8c44..936e6f0 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "homepage": "https://github.com/Demavend/e-library-backbone-sample#readme", "dependencies": { "backbone": "^1.3.3", + "bootstrap": "^3.3.7", "jquery": "^3.2.1", "underscore": "^1.8.3" } diff --git a/style.css b/style.css deleted file mode 100644 index e69de29..0000000 From c8f5eba44836a9e87f7d992983781a1aaf671634 Mon Sep 17 00:00:00 2001 From: Demavend Date: Thu, 24 Aug 2017 15:59:49 +0300 Subject: [PATCH 4/9] Create nav-bar --- index.html | 14 ++++++++++++- js/index.js | 57 ++++++++++++++++++++++++++++++++++------------------- 2 files changed, 50 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 555e543..86a5a06 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,19 @@ - +
+
+
+ GB api navigator + +
+
+
diff --git a/js/index.js b/js/index.js index e41e4a3..3c59c24 100644 --- a/js/index.js +++ b/js/index.js @@ -1,4 +1,19 @@ -let Book = Backbone.Model.extend({ +window.App = { + Models: {}, + Views: {}, + Collections: {}, + Templates: {} +}; +App.Templates.Book = `

<%=title%>` + + `

<%=description%>` + + `

`; +App.Templates.Search = ` +Search +Clean`; +App.Models.Search = Backbone.Model.extend({}); +App.Models.Book = Backbone.Model.extend({ defaults: { title: 'Top secret (apparently).', author: 'Your name could be here.', @@ -9,21 +24,22 @@ let Book = Backbone.Model.extend({ img: 'i/Cover.gif' } }); -let template = `

<%=title%>` + - `

<%=description%>` + - `

`; - -let BookCollection = Backbone.Collection.extend({ - model: Book +App.Collections.Library = Backbone.Collection.extend({ + model: App.Models.Book }); -let Library = Backbone.Collection.extend({ - model: Book +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; + }, }); -let ContainerView = Backbone.View.extend({ +App.Views.Container = Backbone.View.extend({ initialize: function() {}, - template: _.template(template), + template: _.template(App.Templates.Book), tagName: 'div', className: 'panel panel-success', initialize: function() { @@ -34,29 +50,30 @@ let ContainerView = Backbone.View.extend({ return this; }, }); -let BookshelfView = Backbone.View.extend({ +App.Views.Bookshelf = Backbone.View.extend({ tagName: 'div', className: 'panel-group', initialize: function() {}, render: function() { this.collection.forEach((book) => { - let View = new ContainerView({ + let view = new App.Views.Container({ model: book }); - this.$el.append(View.render().el); + this.$el.append(view.render().el); }, this); return this; } - }); +let search = new App.Views.Search; +$('div.container-fluid').append(search.render().el); let library = []; for (let i = 0; i < 10; i++) { - let book = new Book; + let book = new App.Models.Book; library.push(book); } -let bookshelf = new BookshelfView({ +let bookshelf = new App.Views.Bookshelf({ collection: library }); -$('body').append(bookshelf.render().el); +//$('body').append(bookshelf.render().el); From 851ca7472128d308c773b11959747ab6014c95e7 Mon Sep 17 00:00:00 2001 From: Demavend Date: Thu, 24 Aug 2017 17:29:26 +0300 Subject: [PATCH 5/9] Create modal window --- js/index.js | 73 +++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 57 insertions(+), 16 deletions(-) diff --git a/js/index.js b/js/index.js index 3c59c24..379c71e 100644 --- a/js/index.js +++ b/js/index.js @@ -9,10 +9,24 @@ App.Templates.Book = `

<%=titl `'width='100%' class='img-responsive'>

<%=description%>` + `

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

<%=title%>

+ +
+
+Author: <%=author%>;
+Title: <%=title%>;
+Category: <%=category%>;
+Publisher: <%=publisher%>;
+Date: <%=date%>; +
+
+
`; App.Models.Search = Backbone.Model.extend({}); +App.Models.Modal = Backbone.Model.extend({}); App.Models.Book = Backbone.Model.extend({ defaults: { title: 'Top secret (apparently).', @@ -27,15 +41,43 @@ App.Models.Book = Backbone.Model.extend({ App.Collections.Library = Backbone.Collection.extend({ model: App.Models.Book }); +App.Views.Modal = Backbone.View.extend({ + tagName: 'div', + id: 'modal', + className: 'modal fade', + template: _.template(App.Templates.Modal), + render: function() { + this.$el.html(this.template()); + return this; + }, +}); App.Views.Search = Backbone.View.extend({ tagName: 'form', - id:'navbar-collapse', + id: 'navbar-collapse', className: 'navbar-form collapse navbar-collapse navbar-right', template: _.template(App.Templates.Search), - render: function() { + render: function() { this.$el.html(this.template()); return this; }, + events: { + 'click #btnSearch': 'showBooks', + 'click #clean': 'cleanAll' + }, + showBooks: () => { + let library = []; + for (let i = 0; i < 10; i++) { + let book = new App.Models.Book; + library.push(book); + } + let bookshelf = new App.Views.Bookshelf({ + collection: library + }); + $('body').append(bookshelf.render().el); + }, + cleanAll: () => { + $('div.panel-success').remove(); + } }); App.Views.Container = Backbone.View.extend({ initialize: function() {}, @@ -62,18 +104,17 @@ App.Views.Bookshelf = Backbone.View.extend({ this.$el.append(view.render().el); }, this); return this; + }, + events: { + 'click .openModal': 'showModal', + }, + showModal: () => { + let modal = new App.Views.Modal({ + model: book + }); + $('#modal').append(modal.render().el); + $('#modal').modal(); } }); let search = new App.Views.Search; $('div.container-fluid').append(search.render().el); - - -let library = []; -for (let i = 0; i < 10; i++) { - let book = new App.Models.Book; - library.push(book); -} -let bookshelf = new App.Views.Bookshelf({ - collection: library -}); -//$('body').append(bookshelf.render().el); From fe29a8ac81e7c7e8601813aaad98644fe65b1ba5 Mon Sep 17 00:00:00 2001 From: Demavend Date: Sat, 26 Aug 2017 11:38:17 +0300 Subject: [PATCH 6/9] Code division and fix modal --- index.html | 30 +++++++----- js/app.js | 3 ++ js/collections.js | 3 ++ js/index.js | 120 ---------------------------------------------- js/models.js | 12 +++++ js/templates.js | 31 ++++++++++++ js/views.js | 81 +++++++++++++++++++++++++++++++ package.json | 1 + 8 files changed, 149 insertions(+), 132 deletions(-) create mode 100644 js/app.js create mode 100644 js/collections.js delete mode 100644 js/index.js create mode 100644 js/models.js create mode 100644 js/templates.js create mode 100644 js/views.js diff --git a/index.html b/index.html index 86a5a06..dbb8103 100644 --- a/index.html +++ b/index.html @@ -10,26 +10,32 @@ + -
-
-
- GB api navigator - -
-
-
- - - - + + + +
+
+ + + + + + + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..c7de4b5 --- /dev/null +++ b/js/app.js @@ -0,0 +1,3 @@ +let search = new App.Views.Search; +let library = new App.Collections.Library; +$('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/index.js b/js/index.js deleted file mode 100644 index 379c71e..0000000 --- a/js/index.js +++ /dev/null @@ -1,120 +0,0 @@ -window.App = { - Models: {}, - Views: {}, - Collections: {}, - Templates: {} -}; -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.Models.Search = Backbone.Model.extend({}); -App.Models.Modal = Backbone.Model.extend({}); -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' - } -}); -App.Collections.Library = Backbone.Collection.extend({ - model: App.Models.Book -}); -App.Views.Modal = Backbone.View.extend({ - tagName: 'div', - id: 'modal', - className: 'modal fade', - template: _.template(App.Templates.Modal), - render: function() { - this.$el.html(this.template()); - return this; - }, -}); -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: () => { - let library = []; - for (let i = 0; i < 10; i++) { - let book = new App.Models.Book; - library.push(book); - } - let bookshelf = new App.Views.Bookshelf({ - collection: library - }); - $('body').append(bookshelf.render().el); - }, - cleanAll: () => { - $('div.panel-success').remove(); - } -}); -App.Views.Container = Backbone.View.extend({ - initialize: function() {}, - template: _.template(App.Templates.Book), - tagName: 'div', - className: 'panel panel-success', - initialize: function() { - this.render(); - }, - 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: () => { - let modal = new App.Views.Modal({ - model: book - }); - $('#modal').append(modal.render().el); - $('#modal').modal(); - } -}); -let search = new App.Views.Search; -$('div.container-fluid').append(search.render().el); diff --git a/js/models.js b/js/models.js new file mode 100644 index 0000000..86d5962 --- /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', + id: '1' + } +}); diff --git a/js/templates.js b/js/templates.js new file mode 100644 index 0000000..7553813 --- /dev/null +++ b/js/templates.js @@ -0,0 +1,31 @@ +window.App = { + Models: {}, + Views: {}, + Collections: {}, + Templates: {} +}; +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.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..912e410 --- /dev/null +++ b/js/views.js @@ -0,0 +1,81 @@ +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: () => { + for (let i = 0; i < 10; i++) { + let book = new App.Models.Book({ + id: i + }); + library.add(book); + } + let bookshelf = new App.Views.Bookshelf({ + collection: library + }); + $('body').append(bookshelf.render().el); + }, + cleanAll: () => { + $('.panel-group').remove(); + } +}); +App.Views.Container = Backbone.View.extend({ + initialize: function() { + this.render(); + }, + 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', + id: 'modal', + className: 'modal fade', + 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, i) => { + 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'); + console.log(library.models[num]); + let modal = new App.Views.Modal({ + model: library.models[num] + }); + $('body').append(modal.render().el); + $('#modal').modal(); + } +}); diff --git a/package.json b/package.json index 936e6f0..bd1c580 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "backbone": "^1.3.3", "bootstrap": "^3.3.7", "jquery": "^3.2.1", + "requirejs": "^2.3.5", "underscore": "^1.8.3" } } From 15a6bddfd6f85d79f96b1dd55a0f6a653808ddcc Mon Sep 17 00:00:00 2001 From: Demavend Date: Sat, 26 Aug 2017 14:11:33 +0300 Subject: [PATCH 7/9] Refresh librery in new serch and clear --- index.html | 6 +++--- js/app.js | 1 + js/models.js | 2 +- js/templates.js | 12 ++++++------ js/views.js | 20 +++++++++++--------- 5 files changed, 22 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index dbb8103..4df4e51 100644 --- a/index.html +++ b/index.html @@ -27,9 +27,9 @@ -
-
- + + diff --git a/js/app.js b/js/app.js index c7de4b5..1928105 100644 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,4 @@ let search = new App.Views.Search; let library = new App.Collections.Library; +let counter = 0; $('div.container-fluid').append(search.render().el); diff --git a/js/models.js b/js/models.js index 86d5962..dfc18da 100644 --- a/js/models.js +++ b/js/models.js @@ -7,6 +7,6 @@ App.Models.Book = Backbone.Model.extend({ 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', - id: '1' + dataId: '0' } }); diff --git a/js/templates.js b/js/templates.js index 7553813..d20ea71 100644 --- a/js/templates.js +++ b/js/templates.js @@ -6,15 +6,15 @@ window.App = { }; App.Templates.Book = `

<%=title%>` + `

<%=description%>` + - `

<%=description%>` + + `

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

<%=title%>

- +App.Templates.Modal = `
+
+

<%=title%>

Author: <%=author%>;
@@ -24,7 +24,7 @@ App.Templates.Modal = `
Date: <%=date%>;
-
`; +
`; App.Templates.Head = `

<%=title%>

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

<%=description%>

`; diff --git a/js/views.js b/js/views.js index 912e410..4a3b036 100644 --- a/js/views.js +++ b/js/views.js @@ -12,18 +12,23 @@ App.Views.Search = Backbone.View.extend({ 'click #clean': 'cleanAll' }, showBooks: () => { + counter = 0; + $('.panel-group').remove(); for (let i = 0; i < 10; i++) { let book = new App.Models.Book({ - id: i + dataId: counter }); library.add(book); + counter++; } let bookshelf = new App.Views.Bookshelf({ collection: library }); - $('body').append(bookshelf.render().el); + $('#underscore').before(bookshelf.render().el); }, cleanAll: () => { + counter = 0; + library.reset() $('.panel-group').remove(); } }); @@ -41,11 +46,9 @@ App.Views.Container = Backbone.View.extend({ }); App.Views.Modal = Backbone.View.extend({ tagName: 'div', - id: 'modal', - className: 'modal fade', + className: 'modal-dialog', template: _.template(App.Templates.Modal), initialize: function(summary) { - this.render(summary); }, render: function() { @@ -58,7 +61,7 @@ App.Views.Bookshelf = Backbone.View.extend({ className: 'panel-group', initialize: function() {}, render: function() { - this.collection.forEach((book, i) => { + this.collection.forEach((book) => { let view = new App.Views.Container({ model: book }); @@ -67,15 +70,14 @@ App.Views.Bookshelf = Backbone.View.extend({ return this; }, events: { - 'click .openModal': 'showModal', + 'click .openModal': 'showModal' }, showModal: (e) => { let num = e.target.getAttribute('data-id'); - console.log(library.models[num]); let modal = new App.Views.Modal({ model: library.models[num] }); - $('body').append(modal.render().el); + $('#modal').html(modal.render().el); $('#modal').modal(); } }); From 0db3acb66aa351de8200b901f2663e435cf7e995 Mon Sep 17 00:00:00 2001 From: Demavend Date: Sat, 26 Aug 2017 17:15:26 +0300 Subject: [PATCH 8/9] Add pagination --- index.html | 2 ++ js/app.js | 25 +++++++++++++++++++++++++ js/templates.js | 8 ++++++-- js/views.js | 50 +++++++++++++++++++++++++++++++++++-------------- 4 files changed, 69 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 4df4e51..26b753a 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,8 @@
+ diff --git a/js/app.js b/js/app.js index 1928105..afbaf80 100644 --- a/js/app.js +++ b/js/app.js @@ -1,4 +1,29 @@ let search = new App.Views.Search; let library = new App.Collections.Library; let counter = 0; +let addBooks = () => { + for (let i = 0; i < 10; i++) { + let book = new App.Models.Book({ + dataId: counter + }); + library.add(book); + counter++; + console.log(counter) + } + let bookshelf = new App.Views.Bookshelf({ + collection: library.slice(-10) + }); + $('div.pagination').before(bookshelf.render().el); +}; +let remBooks = () => { + counter = counter - 20; + for (let i = 0; i < 10; i++) { + library.pop(); + counter++; + } + let bookshelf = new App.Views.Bookshelf({ + collection: library.slice(-10) + }); + $('div.pagination').before(bookshelf.render().el); +}; $('div.container-fluid').append(search.render().el); diff --git a/js/templates.js b/js/templates.js index d20ea71..6bbd8c4 100644 --- a/js/templates.js +++ b/js/templates.js @@ -25,7 +25,11 @@ App.Templates.Modal = `
`; - App.Templates.Head = `

<%=title%>

`; +App.Templates.Pagination = ` + +`; + + /*App.Templates.Head = `

<%=title%>

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

<%=description%>

`; - App.Templates.Button = ``; + App.Templates.Button = ``;*/ diff --git a/js/views.js b/js/views.js index 4a3b036..8e8dcda 100644 --- a/js/views.js +++ b/js/views.js @@ -14,28 +14,21 @@ App.Views.Search = Backbone.View.extend({ showBooks: () => { counter = 0; $('.panel-group').remove(); - for (let i = 0; i < 10; i++) { - let book = new App.Models.Book({ - dataId: counter - }); - library.add(book); - counter++; - } - let bookshelf = new App.Views.Bookshelf({ - collection: library - }); - $('#underscore').before(bookshelf.render().el); + addBooks(); + 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(); } }); App.Views.Container = Backbone.View.extend({ - initialize: function() { - this.render(); - }, + initialize: function() {}, template: _.template(App.Templates.Book), tagName: 'div', className: 'panel panel-success', @@ -81,3 +74,32 @@ App.Views.Bookshelf = Backbone.View.extend({ $('#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'); + if (e.target.getAttribute('data-id') === 'more') { + addBooks(); + } else if (e.target.getAttribute('data-id') === 'next') { + $('.panel-group').remove(); + if (button) button.setAttribute('class', 'btn btn-default'); + addBooks(); + } else { + if (counter === 20) { + $('#prev').addClass('disabled'); + } + $('.panel-group').remove(); + remBooks(); + } + } +}); From 485b8933270ff8151d5124aa62c286a084115eb0 Mon Sep 17 00:00:00 2001 From: Demavend Date: Tue, 29 Aug 2017 12:07:27 +0300 Subject: [PATCH 9/9] Add router --- index.html | 3 ++- js/app.js | 27 ++------------------------- js/router.js | 38 ++++++++++++++++++++++++++++++++++++++ js/templates.js | 3 ++- js/views.js | 14 ++++++++------ 5 files changed, 52 insertions(+), 33 deletions(-) create mode 100644 js/router.js diff --git a/index.html b/index.html index 26b753a..f838087 100644 --- a/index.html +++ b/index.html @@ -31,13 +31,14 @@ - + + diff --git a/js/app.js b/js/app.js index afbaf80..32892bf 100644 --- a/js/app.js +++ b/js/app.js @@ -1,29 +1,6 @@ +const STEP = 10; let search = new App.Views.Search; let library = new App.Collections.Library; let counter = 0; -let addBooks = () => { - for (let i = 0; i < 10; i++) { - let book = new App.Models.Book({ - dataId: counter - }); - library.add(book); - counter++; - console.log(counter) - } - let bookshelf = new App.Views.Bookshelf({ - collection: library.slice(-10) - }); - $('div.pagination').before(bookshelf.render().el); -}; -let remBooks = () => { - counter = counter - 20; - for (let i = 0; i < 10; i++) { - library.pop(); - counter++; - } - let bookshelf = new App.Views.Bookshelf({ - collection: library.slice(-10) - }); - $('div.pagination').before(bookshelf.render().el); -}; +let page = 0; $('div.container-fluid').append(search.render().el); 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 index 6bbd8c4..c6dddb9 100644 --- a/js/templates.js +++ b/js/templates.js @@ -2,7 +2,8 @@ window.App = { Models: {}, Views: {}, Collections: {}, - Templates: {} + Templates: {}, + Router:{} }; App.Templates.Book = `

<%=title%>` + `

{ - counter = 0; + location.href = '#page/1'; $('.panel-group').remove(); - addBooks(); if ($('div.btn-group').length < 1) { let pagination = new App.Views.Pagination; $('div.pagination').append(pagination.render().el); @@ -25,6 +24,7 @@ App.Views.Search = Backbone.View.extend({ library.reset() $('.panel-group').remove(); $('.btn-group').remove(); + location.href = ''; } }); App.Views.Container = Backbone.View.extend({ @@ -88,18 +88,20 @@ App.Views.Pagination = Backbone.View.extend({ }, pagination: function(e) { const button = document.querySelector('button.disabled'); + let more = page + 1; + let less = page - 1; if (e.target.getAttribute('data-id') === 'more') { - addBooks(); + location.href = `#page/${more}`; } else if (e.target.getAttribute('data-id') === 'next') { $('.panel-group').remove(); if (button) button.setAttribute('class', 'btn btn-default'); - addBooks(); + location.href = `#page/${more}`; } else { - if (counter === 20) { + if (counter === (STEP*2)) { $('#prev').addClass('disabled'); } $('.panel-group').remove(); - remBooks(); + location.href = `#page/${less}`; } } });