restartsoft · restartsoft · Apr 17, 2023 · Mar 5, 2024 · Mar 13, 2024 · Mar 25, 2024
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,9 @@
+import pages from './pages';
+import('./styles.css');
+
+import mainPage from './mainPage';
+import loginPage from './loginPage';
+
+pages.openPage('login');
+loginPage.handleEvents();
+mainPage.handleEvents();
diff --git a/projects/loft-photo/layout.html b/projects/loft-photo/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/loginPage.js b/projects/loft-photo/loginPage.js
@@ -0,0 +1,14 @@
+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.VKWrapper.login();
+      await model.VKWrapper.init();
+      pages.openPage('main');
+      await mainPage.getNextPhoto();
+    });
+  },
+};
diff --git a/projects/loft-photo/mainPage.js b/projects/loft-photo/mainPage.js
@@ -0,0 +1,44 @@
+import model from './model';
+
+let startX = 0;
+
+export default {
+  async getNextPhoto() {
+    const { friend, id, url } = await model.getNextPhoto();
+    this.setFriendAndPhoto(friend, id, url);
+  },
+
+  setFriendAndPhoto(friend, id, url) {
+    const componentPhoto = document.querySelector('.component-photo');
+    const componentProfileLink = document.querySelector('.component-header-profile-link');
+    const componentHeaderPhoto = document.querySelector('.component-header-photo');
+    const componentHeaderName = document.querySelector('.component-header-name');
+
+    componentPhoto.style.backgroundImage = `url(${url})`;
+
+    componentProfileLink.href = friend.link;
+
+    componentHeaderPhoto.style.backgroundImage = `url(${friend.avatar})`;
+    componentHeaderPhoto.style.backgroundSize = 'cover';
+    componentHeaderPhoto.style.backgroundPosition = 'center';
+
+    componentHeaderName.textContent = `${friend.firstName} ${friend.lastName}`;
+  },
+
+  handleEvents() {
+    document.addEventListener('touchstart', (e) => {
+      startX = Math.trunc(e.changedTouches[0].clientX);
+    });
+
+    document.addEventListener('touchend', async (e) => {
+      const endX = Math.trunc(e.changedTouches[0].clientX);
+      const docWidth = document.body.clientWidth;
+      const touchWidth = Math.abs(endX - startX);
+
+      // Листаем при протяжке от 10% от ширина документа
+      if (touchWidth / docWidth >= 0.1) {
+        await this.getNextPhoto();
+      }
+    });
+  },
+};
diff --git a/projects/loft-photo/model.js b/projects/loft-photo/model.js
@@ -0,0 +1,88 @@
+const VK = window.VK;
+
+VK.init({
+  apiId: 51885757,
+});
+
+const VKWrapper = {
+  friends: [],
+
+  callAPI(method, params) {
+    params.v = '5.199';
+
+    return new Promise((resolve, reject) => {
+      VK.Api.call(method, params, (data) => {
+        if (data.response) {
+          resolve(data.response);
+        } else {
+          reject(new Error('Call error'));
+        }
+      });
+    });
+  },
+
+  login() {
+    return new Promise((resolve, reject) => {
+      VK.Auth.login((data) => {
+        if (data.session) {
+          resolve(data);
+        } else {
+          reject(new Error('Not connected'));
+        }
+      }, 4);
+    });
+  },
+
+  async init() {
+    const response = await this.callAPI('friends.get', { fields: 'photo_100,domain' });
+    this.friends = response.items;
+    return this.friends;
+  },
+
+  photoCache: {},
+
+  async getFriendPhotos(id) {
+    let photos = this.photoCache[id];
+
+    if (photos) {
+      return photos;
+    }
+
+    const response = await this.callAPI('photos.getAll', { owner_id: id });
+    photos = response.items;
+
+    this.photoCache[id] = photos;
+
+    return photos;
+  },
+};
+
+export default {
+  getRandomElement(array) {
+    const maxRandomIndex = array.length;
+    const randomIndex = parseInt(Math.random() * maxRandomIndex);
+
+    return array[randomIndex];
+  },
+  async getNextPhoto() {
+    const maxFriendsIndex = VKWrapper.friends.length;
+    const friendsIndex = parseInt(Math.random() * maxFriendsIndex);
+
+    const photos = await VKWrapper.getFriendPhotos(VKWrapper.friends[friendsIndex].id);
+
+    const maxPhotosIndex = photos.length;
+    const photosIndex = parseInt(Math.random() * maxPhotosIndex);
+
+    return {
+      friend: {
+        firstName: VKWrapper.friends[friendsIndex].first_name,
+        lastName: VKWrapper.friends[friendsIndex].last_name,
+        avatar: VKWrapper.friends[friendsIndex].photo_100,
+        link: `https://vk.com/${VKWrapper.friends[friendsIndex].domain}`,
+      },
+      id: photos[photosIndex].id,
+      url: photos[photosIndex].sizes.filter((photo) => photo.width > 360)[0].url,
+    };
+  },
+  VKWrapper,
+};
diff --git a/projects/loft-photo/pages.js b/projects/loft-photo/pages.js
@@ -0,0 +1,20 @@
+const pagesMap = {
+  login: '.page-login',
+  main: '.page-main',
+  profile: '.page-profile',
+};
+
+export default {
+  openPage(name) {
+    const activeElement = document.querySelector('[active]');
+    const element = document.querySelector(pagesMap[name]);
+
+    if (activeElement !== null && activeElement !== element) {
+      activeElement.classList.toggle('hidden');
+      activeElement.toggleAttribute('active');
+    } else if (activeElement === element) return;
+
+    element.classList.toggle('hidden');
+    element.toggleAttribute('active');
+  },
+};