loftschool · Vadim503 · Mar 17, 2023 · Mar 12, 2024
diff --git a/projects/loft-photo-lite-3/images/arrow-left.svg b/projects/loft-photo-lite-3/images/arrow-left.svg
diff --git a/projects/loft-photo-lite-3/images/button.svg b/projects/loft-photo-lite-3/images/button.svg
diff --git a/projects/loft-photo-lite-3/images/chat.svg b/projects/loft-photo-lite-3/images/chat.svg
diff --git a/projects/loft-photo-lite-3/images/exit.svg b/projects/loft-photo-lite-3/images/exit.svg
diff --git a/projects/loft-photo-lite-3/images/heart-red.svg b/projects/loft-photo-lite-3/images/heart-red.svg
diff --git a/projects/loft-photo-lite-3/images/heart.svg b/projects/loft-photo-lite-3/images/heart.svg
diff --git a/projects/loft-photo-lite-3/images/logo.svg b/projects/loft-photo-lite-3/images/logo.svg
diff --git a/projects/loft-photo-lite-3/images/send.svg b/projects/loft-photo-lite-3/images/send.svg
diff --git a/projects/loft-photo-lite-3/images/vert1.svg b/projects/loft-photo-lite-3/images/vert1.svg
diff --git a/projects/loft-photo-lite-3/images/vert2.svg b/projects/loft-photo-lite-3/images/vert2.svg
diff --git a/projects/loft-photo-lite-3/images/vert3.svg b/projects/loft-photo-lite-3/images/vert3.svg
diff --git a/projects/loft-photo-lite-3/index.js b/projects/loft-photo-lite-3/index.js
@@ -0,0 +1,8 @@
+import pages from './pages';
+import mainPage from './mainPage';
+import loginPage from './loginPage';
+import('./styles.css');
+
+pages.openPage('login');
+loginPage.handleEvents();
+mainPage.handleEvents();
diff --git a/projects/loft-photo-lite-3/layout.html b/projects/loft-photo-lite-3/layout.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=360,user-scalable=false" />
+    <title>Loft Photo</title>
+    <script src="http://vk.com/js/api/openapi.js"></script>
+</head>
+<body>
+<div id="app">
+    <div class="page page-login hidden">
+        <div class="page-login-vert1"></div>
+        <div class="page-login-vert2"></div>
+        <div class="page-login-vert3"></div>
+        <div class="page-login-logo">
+            <div class="page-login-image"></div>
+            <div class="page-login-text">Не пропустите лучшие моменты из жизни ваших друзей!</div>
+        </div>
+        <button class="page-login-button"></button>
+    </div>
+    <div class="page page-main hidden">
+        <div class="component-photo"></div>
+        <div class="component-header">
+            <a class="component-header-profile-link" href="#">
+                <div class="component-header-photo"></div>
+                <div class="component-header-name"></div>
+            </a>
+        </div>
+        <div class="component-footer">
+            <div class="component-footer-container">
+                <a href="#" class="component-footer-container-social-comments">
+                    0
+                </a>
+                <a href="#" class="component-footer-container-social-likes">
+                    0
+                </a>
+                <a class="component-footer-container-profile-link" href="#">
+                    <div class="component-footer-photo"></div>
+                </a>
+                <div class="component-comments hidden">
+                    <div class="component-comments-container">
+                        <div class="component-comments-container-title">Комментарии</div>
+                        <div class="component-comments-container-list"></div>
+                        <div class="component-comments-container-form">
+                            <input type="text" class="component-comments-container-form-input" placeholder="Введите текст"/>
+                            <div class="component-comments-container-form-send"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="page page-profile hidden">
+        <a href="#" class="page-profile-back"></a>
+        <a href="#" class="page-profile-exit"></a>
+        <div class="component-user-info">
+            <div class="component-user-info-photo"></div>
+            <div class="component-user-info-name"></div>
+        </div>
+        <div class="component-user-photos"></div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/projects/loft-photo-lite-3/loginPage.js b/projects/loft-photo-lite-3/loginPage.js
@@ -0,0 +1,15 @@
+import model from './model';
+import pages from './pages';
+import mainPage from './mainPage';
+
+export default {
+  handleEvents() {
+    document.querySelector('.page-login-button').addEventListener('click', async () => {
+      await model.login();
+      await model.init();
+
+      pages.openPage('main');
+      await mainPage.getNextPhoto();
+    });
+  },
+};
diff --git a/projects/loft-photo-lite-3/mainPage.js b/projects/loft-photo-lite-3/mainPage.js
@@ -0,0 +1,35 @@
+import { doc } from 'prettier';
+import model from './model';
+
+export default {
+  async getNextPhoto() {
+    const { friend, id, url } = await model.getNextPhoto();
+    this.setFriendAndPhoto(friend, id, url);
+  },
+
+  setFriendAndPhoto(friend, id, url) {
+    const photoComp = document.querySelector('.component-photo');
+    const headerPhotoComp = document.querySelector('.component-header-photo');
+    const photoNameComp = document.querySelector('.component-header-name');
+
+    photoComp.style.backgrounImage = `url(${url})`;
+    headerPhotoComp.style.backgrounImage = `url('${frind.photo_50}')`;
+    photoNameComp.innerText = `${fiend.first_name ?? ''} ${frind.last_name ?? ''}`;
+  },
+
+  handleEvents() {
+    let startFrom;
+
+    document.querySelector('.component-photo').addEventListener('touchstart', (e) => {
+      e.preventDefault();
+      startFrom = {y: e.changedTouches[0].pageY};
+    });
+
+    document.querySelector('.component-photo').addEventListener('touchend', async (e) => { 
+      const direction = e.changedTouches[0].pageY - startFrom.y;
+      if (direction < 0) {
+        await this.getNextPhoto();
+      }
+    });
+  },
+};
diff --git a/projects/loft-photo-lite-3/model.js b/projects/loft-photo-lite-3/model.js
@@ -0,0 +1,89 @@
+export default {
+  getRandomElement(array) {},
+
+  async getNextPhoto() {
+    const friend = this.getRandomElement(this.friends.item);
+    const photos = await this.getFriendPhotos(friend.id);
+    const photo = this.getRandomElement(photos.items);
+    const size = this.findSize(photo);
+
+    return {fiend, id: photo.id, url: size.url};
+  },
+
+  findSize(photo){
+    const size = photo.sizes.find ((size) =>{size.width >= 360})
+    if (!size) {
+      return photo.sizes.reduce ((biggest, current) => {
+        if (current.width > biggest.width) {
+          return current;
+        }
+        return biggest;
+      }, photo.sizes[0]);
+    }
+  },
+
+  async init (){
+    this.photoCache = {};
+    this.friends = await this.getFriends();
+  },
+
+  login() {
+    return new Promise((resolve, reject) => {
+      VK.init ({
+        apiId: APP_ID,
+      })
+      VK.Auth.login((response) => {
+        if(response.session) {
+          resolve(response)
+        } else {
+          console.error (response);
+          reject(response);
+        }
+      });
+    });
+  },
+
+  logout () {
+
+  },
+
+  callApi (method, params) {
+    params.v = params.v || '5.120';
+
+    return new Promise ((resolve, reject) => {
+      VK.api (method, params, (response) => {
+        if (response.error) {reject(new Error(response.error.error_msg));} else {resolve(response.response);}
+      });
+    });
+
+  },
+
+  getPhotos(owner) {
+    const params = {
+      owner_if: owner,
+    };
+
+    return this.callApi ('photos.getAll', params);
+  },
+
+  getFriends () {
+    const params = {
+      friends: ['photo_50', 'photo_100'],
+    }
+    return this.callApi('friends.get', params);
+  },
+
+  async getFriendPhotos(id) {
+    let photos = this.photoCache[id];
+
+    if (photos) {
+      return photos;
+    }
+
+   photos = await this.getPhotos (id);
+
+    this.photoCache[id] = photos;
+
+    return photos;
+  },
+};
diff --git a/projects/loft-photo-lite-3/pages.js b/projects/loft-photo-lite-3/pages.js
@@ -0,0 +1,9 @@
+const pagesMap = {
+  login: '.page-login',
+  main: '.page-main',
+  profile: '.page-profile',
+};
+
+export default {
+  openPage(name) {},
+};