Phone app #17
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,183 @@ | ||
| class App { | ||
| constructor(){ | ||
| this.state = { //равен ссылке, которая ведет на объект | ||
| people: [ | ||
| { | ||
| name: 'Иван', | ||
| lastName: 'Петров', | ||
| email: 'IvanPetrov@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Сергей', | ||
| lastName: 'Сергеев', | ||
| email: 'SergeiSergeev@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Иван', | ||
| lastName: 'Иванов', | ||
| email: 'IvanIvanov@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Александр', | ||
| lastName: 'Александров', | ||
| email: 'AlexAlex@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Алекс', | ||
| lastName: 'Смирнов', | ||
| email: 'AlexSmirnov@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Сергей', | ||
| lastName: 'Волков', | ||
| email: 'VolkovSergey@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Мария', | ||
| lastName: 'Шарапова', | ||
| email: 'MariyaSharapova@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Александр', | ||
| lastName: 'Винник', | ||
| email: 'AlexVinnik@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Дарий', | ||
| lastName: 'Смирнов', | ||
| email: 'DariySmirnov@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Елена', | ||
| lastName: 'Лещенко', | ||
| email: 'ElenaLeshenko@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Ольга', | ||
| lastName: 'Новикова', | ||
| email: 'OlgaNovikova@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Наталья', | ||
| lastName: 'Шемякина', | ||
| email: 'ShemyakinaN@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Анна', | ||
| lastName: 'Донцова', | ||
| email: 'AnnaDontsova@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Влад', | ||
| lastName: 'Яма', | ||
| email: 'VladYama@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Кира', | ||
| lastName: 'Воробьева', | ||
| email: 'Kira1990@ec.ua' | ||
| }, | ||
| { | ||
| name: 'Виктор', | ||
| lastName: 'Кривенко', | ||
| email: 'ViktorKriv@ec.ua' | ||
| } | ||
| ], | ||
| activePage: 'contacts' | ||
| }; | ||
|
|
||
| this.pages = { | ||
| contacts: new ContactsPage(this.state), // тут передали ссылку на this.state | ||
| adduser: new AddUser(this.state), | ||
| keypad: new KeypadPage(this.state), | ||
| editcontact: new EditContact(this.state), | ||
| user: new User(this.state) | ||
| }; | ||
|
|
||
| this.initializeRouter(); | ||
| this.switchRouter(); | ||
|
|
||
| } | ||
|
|
||
| initializeRouter () { | ||
|
Member
There was a problem hiding this comment. pretty sure you can create an additional file and call it "Router.js" - and move all specific to navigation logic in. Then initialize as other pages. The main goal what we trying to solve the minimal splitting by responsibilities have you feel it? |
||
| const mountNode = document.getElementById('mountNode'); | ||
| //console.log(mountNode); | ||
| mountNode.innerHTML = ` | ||
| <div id="app"></div> | ||
| <footer class="footer"> | ||
| <div class="container bottom-radius"> | ||
| <nav class="main-nav"> | ||
| ${this.renderLink({href:'contacts', glyphicon:'search', text:'Contacts', active: true})} | ||
| ${this.renderLink({href:'keypad', glyphicon:'th', text:'Keypad', active: false})} | ||
| ${this.renderLink({href:'edit-contact', glyphicon:'pencil', text:'Edit contact', active: false})} | ||
| ${this.renderLink({href:'user', glyphicon:'user', text:'User', active: false})} | ||
| ${this.renderLink({href:'add-user', glyphicon:'plus', text:'Add user', active: false})} | ||
| </nav> | ||
| </div> | ||
| </footer>`; | ||
|
|
||
| //this.initializeRouterHandlers(); | ||
| this.appDOMNode = mountNode.querySelector('#app'); // сюда будем делать рендер всех страниц | ||
|
Member
There was a problem hiding this comment. getElementById working around in 10 times faster than querySelector, I guess it's better to switch it |
||
| // и это не будет затрагивать футер и его события | ||
| } | ||
|
|
||
| renderNewPage() { | ||
|
|
||
| this.appDOMNode.innerHTML = this.pages[this.state.activePage].render(); | ||
| } | ||
|
|
||
| renderLink(options) { | ||
| let {href, glyphicon, text, active} = options; | ||
|
Member
There was a problem hiding this comment. it could be moved to Router.js also |
||
| let activeClass = active ? 'active' : ''; | ||
|
|
||
| return `<a href="${href}" class="tab ${activeClass}"> | ||
| <span class="glyphicon glyphicon-${glyphicon}" aria-hidden="true"></span> | ||
| <span class = "tab-text">${text}</span> | ||
| </a> ` | ||
| } | ||
|
|
||
|
|
||
| switchRouter() { | ||
| const parent = document.querySelector('.main-nav'); | ||
|
Member
There was a problem hiding this comment. I think we can make such selector once - and remember the link to it, no need to make it on every |
||
| parent.addEventListener('click', (e) => { | ||
| e.preventDefault(); | ||
| //let target = e && e.target; | ||
| let target = e && e.target && (e.target.closest('a') || e.target.classList.contains('tab')); | ||
|
Member
There was a problem hiding this comment. oh... such checks look like a bit overhead.
Member
There was a problem hiding this comment. on real word usage probably we should be always 100% be sure about our target |
||
| if (target == false) return; | ||
|
|
||
| //console.log(target); | ||
|
|
||
| if (target.classList.contains('active')) return; | ||
| if (target.classList.contains('tab')) { | ||
| let active = document.querySelector('.active'); | ||
|
Member
There was a problem hiding this comment. querySelector is always performance costly operation it better to omit every time you can do it. So, for example, you could the same solution as we did with a slider in class. |
||
|
|
||
| active.classList.remove('active'); | ||
| target.classList.add('active'); | ||
|
|
||
| let href = target.getAttribute('href'); | ||
| //console.log(href); | ||
| this.state.activePage = href.replace(/-/g, '').toLowerCase(); | ||
|
Member
There was a problem hiding this comment. probably Or you can just use your HTML-attribute to indicate path of navigation and build "Map" to connect your active page |
||
| //console.log(this.state.activePage); | ||
| this.renderNewPage(); | ||
| } | ||
| return; | ||
| }) | ||
| } | ||
| // updateView() { | ||
| // const activePage = this.state.activePage; | ||
| // this.pages[activePage].updateState(this.state); //updateState делаем на каждой странице | ||
| // | ||
| // } | ||
| render() { | ||
| const {activePage} = this.state; | ||
| //const activePage = this.state.activePage; // то же самое | ||
|
|
||
| // this.updateView(); | ||
| this.appDOMNode.innerHTML = this.pages[activePage].render(); // и отрендерь ту страничку, | ||
| // которая сейчас указана как activePage в this.state | ||
|
|
||
| } | ||
| } | ||
|
|
||
| const app = new App(); | ||
| app.render(); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess there a typo with formatting