loftschool · JimmyCoid · Apr 17, 2023 · Jul 22, 2023 · Jul 22, 2023 · Jul 23, 2023
diff --git a/projects/loft-photo/friends.json b/projects/loft-photo/friends.json
@@ -0,0 +1,32 @@
+[
+  {
+    "id": 0,
+    "avatar": "https://via.placeholder.com/100?text=avatar",
+    "firstName": "Adrian",
+    "lastName": "Norman"
+  },
+  {
+    "id": 1,
+    "avatar": "https://via.placeholder.com/100?text=avatar",
+    "firstName": "Gail",
+    "lastName": "Norton"
+  },
+  {
+    "id": 2,
+    "avatar": "https://via.placeholder.com/100?text=avatar",
+    "firstName": "Molina",
+    "lastName": "Rodgers"
+  },
+  {
+    "id": 3,
+    "avatar": "https://via.placeholder.com/100?text=avatar",
+    "firstName": "Adams",
+    "lastName": "Parrish"
+  },
+  {
+    "id": 4,
+    "avatar": "https://via.placeholder.com/100?text=avatar",
+    "firstName": "Mercer",
+    "lastName": "Wiggins"
+  }
+]
diff --git a/projects/loft-photo/images/arrow-left.svg b/projects/loft-photo/images/arrow-left.svg
diff --git a/projects/loft-photo/images/button.svg b/projects/loft-photo/images/button.svg
diff --git a/projects/loft-photo/images/chat.svg b/projects/loft-photo/images/chat.svg
diff --git a/projects/loft-photo/images/exit.svg b/projects/loft-photo/images/exit.svg
diff --git a/projects/loft-photo/images/heart-red.svg b/projects/loft-photo/images/heart-red.svg
diff --git a/projects/loft-photo/images/heart.svg b/projects/loft-photo/images/heart.svg
diff --git a/projects/loft-photo/images/logo.svg b/projects/loft-photo/images/logo.svg
diff --git a/projects/loft-photo/images/send.svg b/projects/loft-photo/images/send.svg
diff --git a/projects/loft-photo/images/vert1.svg b/projects/loft-photo/images/vert1.svg
diff --git a/projects/loft-photo/images/vert2.svg b/projects/loft-photo/images/vert2.svg
diff --git a/projects/loft-photo/images/vert3.svg b/projects/loft-photo/images/vert3.svg
diff --git a/projects/loft-photo/index.js b/projects/loft-photo/index.js
@@ -0,0 +1,14 @@
+import pages from './pages';
+import model from './model';
+
+import mainPage from './mainPage';
+import loginPage from './loginPage';
+
+import('./styles.css');
+
+const pageNames = ['login', 'main', 'profile'];
+
+pages.openPage('login');
+loginPage.handleEvents();
+mainPage.handleEvents();
+
diff --git a/projects/loft-photo/layout.html b/projects/loft-photo/layout.html
@@ -0,0 +1,65 @@
+<!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>
+    <link rel="stylesheet" href="styles.css">
+</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/loginPage.js b/projects/loft-photo/loginPage.js
@@ -0,0 +1,16 @@
+
+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/mainPage.js b/projects/loft-photo/mainPage.js
@@ -0,0 +1,35 @@
+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 headerNameComp = document.querySelector('.component-header-name');
+
+    headerPhotoComp.style.backgroundImage = `url('${friend.photo_50}')`;
+    headerNameComp.innerText = `${friend.first_name ?? ''} ${friend.last_name ?? ''}`;
+    photoComp.style.backgroundImage = `url(${url})`;
+    },
+
+  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/model.js b/projects/loft-photo/model.js
@@ -0,0 +1,92 @@
+const PERM_FRIENDS = 2;
+const PERM_PHOTOS = 4;
+const APP_ID = 51710464; 
+
+export default {
+    getRandomElement(array) {
+        if (!array.length) {
+            return null;
+        }
+
+        const index = Math.round(Math.random() * (array.length - 1));
+
+        return array[index];
+    },
+
+    async getNextPhoto() {
+        const friend = this.getRandomElement(this.friends.items);
+        const photos = await this.getFriendPhotos(friend.id);
+        const photo = this.getRandomElement(photos.items);
+        const size = this.findSize(photo);
+
+        return { friend, id: photo, url: size.url }
+    },
+
+    findSize(photo) {
+        const size = photo.sizes.find((size) => size >= 360);
+
+        if (!size) {
+            return photo.sizes.reduce((biggest, current) => {
+                if (current.width > biggest.width) {
+                    return curent;
+                }
+
+                return biggest;
+            }, photo.sizes[0]);
+        }
+
+        return size;
+    },
+
+    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);
+                }
+            }, PERM_FRIENDS | PERM_PHOTOS);
+        });
+    },
+
+    async init() {
+        this.photoCache = {};
+        this.friends = await this.getFriends();
+    },
+
+    getFriends() {
+        const params = {
+            fields: ['photo_50', 'photo_100'],
+        };
+
+        return this.callApi('friends.get', params);
+    },
+
+    getPhotos(owner) {
+        const params = {
+            owner_id: owner,
+        };
+
+        return this.callApi('photos.getAll', params);
+    },
+
+    async getFriendPhotos(id) {
+    const photos = this.photoCache[id];
+
+    if (photos) {
+        return photos;
+    }
+
+    photos = await this.getPhotos(id);
+
+    this.photoCache[id] = photos;
+
+    return photos;
+    },
+};