itmo2019 · space-created · May 23, 2019 · May 23, 2019 · May 23, 2019 · Jun 1, 2019
diff --git a/.github/settings.yml b/.github/settings.yml
diff --git a/creationLetter.js b/creationLetter.js
diff --git a/fonts/HelveticaNeueCyr-Bold.ttf b/fonts/HelveticaNeueCyr-Bold.ttf
diff --git a/fonts/HelveticaNeueCyr-Light.otf b/fonts/HelveticaNeueCyr-Light.otf
diff --git a/fonts/HelveticaNeueCyr-Medium.otf b/fonts/HelveticaNeueCyr-Medium.otf
diff --git a/fonts/YandexSansDisplay-Regular.woff b/fonts/YandexSansDisplay-Regular.woff
diff --git a/images/abraham_lincoln.png b/images/abraham_lincoln.png
diff --git a/images/albert_einstein.png b/images/albert_einstein.png
diff --git a/images/check.svg b/images/check.svg
diff --git a/images/closer.png b/images/closer.png
diff --git a/images/elon_musk.png b/images/elon_musk.png
diff --git a/images/henry_ford.png b/images/henry_ford.png
diff --git a/images/nikola_tesla.png b/images/nikola_tesla.png
diff --git a/images/thomas_edison.png b/images/thomas_edison.png
diff --git a/images/ya-mini-logo.png b/images/ya-mini-logo.png
diff --git a/images/yandex-mail-logo.svg b/images/yandex-mail-logo.svg
diff --git a/images/york-img.png b/images/york-img.png
diff --git a/index.html b/index.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Яндекс Почта</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+
+<body class="yandex-mail">
+
+<header class="yandex-mail__header header">
+    <div class="burger-menu header__burger-menu">
+        <div class="burger-menu__stripe">
+            <div class="burger-menu__stripe">
+                <div class="burger-menu__stripe"></div>
+            </div>
+        </div>
+    </div>
+    <img class="header__yandex-mail-logo" src="images/yandex-mail-logo.svg" alt="Лого - Яндекс Почта"/>
+    <form class="mail-search header__mail-search">
+        <label>
+            <input class="mail-search__input" type="text" placeholder="Поиск"/>
+        </label>
+        <div class="mail-search__clear">×</div>
+    </form>
+</header>
+
+<main class="main-content">
+    <nav class="nav-menu main-content__nav-menu">
+        <button class="nav-menu__action-button">Написать</button>
+        <button class="nav-menu__action-button nav-menu__action-button-indent"
+                onclick=getNewLetter()>Получить письмо</button>
+        <ul class="nav-menu__menu-list-tabs menu-list-tabs">
+            <li class="menu-list-tabs__tab menu-list-tabs__incoming-tab">Входящие</li>
+            <li class="menu-list-tabs__tab">Отправленные</li>
+            <li class="menu-list-tabs__tab">Удалённые</li>
+            <li class="menu-list-tabs__tab">Спам</li>
+            <li class="menu-list-tabs__tab">Черновики</li>
+            <li class="menu-list-tabs__tab">Создать папку</li>
+        </ul>
+    </nav>
+    <div class="mail-content__mail-box mail-box">
+        <div class="mail-box__box-header box-header">
+            <label class="box-header__check-all-letters-wrapper check-letter">
+                <input id="check-all-letters" class="check-letter_visually-hidden" type="checkbox"
+                       onclick=checkAll()>
+                <span class="check-letter__box"></span>
+            </label>
+            <label class="box-header__button-wrapper"><input type="button"
+                                                             class="box-header__button"
+                                                             value="Переслать">
+            </label>
+            <label class="box-header__button-wrapper"><input type="button" class="box-header__button"
+                                                             value="Удалить" onclick=removeLetters()></label>
+            <label class="box-header__button-wrapper"><input type="button" class="box-header__button"
+                                                             value="Это спам!"></label>
+            <label class="box-header__button-wrapper"><input type="button" class="box-header__button"
+                                                             value="Прочитано"></label>
+        </div>
+        <div class="mail-box__hr-line"></div>
+
+
+        <div class="mail-box__letters-section-wrapper">
+            <section class="letters-section">
+            </section>
+        </div>
+
+
+        <footer class="letters-section__footer">
+            <div class="mail-box__hr-line"></div>
+            <div class="letters-section__footer-info">
+                <a href="#" class="letters-section__footer-link">Помощь и обратная связь</a>
+                <a href="#" class="letters-section__footer-link">Реклама</a>
+                <div class="letters-section__footer-item">&copy 2001-2019,</div>
+                <div class="letters-section__footer-link">Яндекс</div>
+            </div>
+        </footer>
+    </div>
+</main>
+
+</body>
+<script src="mailController.js" async></script>
+<script src="creationLetter.js" async></script>
+
+</html>
diff --git a/mailController.js b/mailController.js
@@ -0,0 +1,113 @@
+const minTimeFrequencyAppearance = minutesToMillis(5);
+const maxTimeWindow = minutesToMillis(10);
+const maxLettersOnPage = 30;
+
+let stack = [];
+let letterCounterOnPage = 0;
+
+function minutesToMillis(minutes) {
+    return 1000 * 60 * minutes
+}
+
+function getRandomArbitrary(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+let clock = setTimeout(function newLetter() {
+    getNewLetter();
+    clock = setTimeout(newLetter, minTimeFrequencyAppearance
+        + getRandomArbitrary(0, maxTimeWindow - minTimeFrequencyAppearance));
+}, 1000);
+
+let checkAllBox = document.querySelector('#check-all-letters');
+
+function checkAll() {
+    let checkBoxes = document.body.querySelectorAll('.check-letter_visually-hidden');
+    checkBoxes.forEach(
+        checkBox => {
+            checkBox.checked = checkAllBox.checked;
+        }
+    );
+}
+
+function uncheckAllChecker(currentCheckBox) {
+    if (!currentCheckBox.checked) {
+        checkAllBox.checked = false;
+    }
+}
+
+function getReadLetter(currentReadableLetter) {
+    currentReadableLetter.classList.remove('covered-letter_not-read');
+    currentReadableLetter.classList.add('covered-letter');
+    let needRemoveClassNode = currentReadableLetter.querySelector('.is-read-mark_not-read');
+    needRemoveClassNode.classList.remove('is-read-mark_not-read');
+    needRemoveClassNode.classList.add('is-read-mark');
+}
+
+function removeLetters() {
+    let openedLetters = document.body.querySelectorAll('.opened-letter');
+    for (let i = 0; i < openedLetters.length; i++) {
+        if (!openedLetters[i].classList.contains('non-displayed')) {
+            return
+        }
+    }
+    let checkBoxes = document.body.querySelectorAll('.check-letter_visually-hidden');
+    for (let i = 1; i < checkBoxes.length; i++) {
+        if (checkBoxes[i].checked) {
+            let checkedLetter = checkBoxes[i];
+            while (!checkedLetter.classList.contains('letters-section__letter-wrapper')) {
+                checkedLetter = checkedLetter.parentNode;
+            }
+            checkedLetter.classList.add('letters-section_delete-letter-animation');
+            checkedLetter.addEventListener('animationend', () => {
+                checkedLetter.parentNode.removeChild(checkedLetter);
+            });
+            letterCounterOnPage--;
+        }
+    }
+    if (checkAllBox.checked) {
+        checkAllBox.checked = false;
+    }
+    setTimeout( function () {
+        while (letterCounterOnPage < maxLettersOnPage && stack.length > 0) {
+            let lettersSection = document.querySelector('.letters-section');
+            let newLetter = stack.pop();
+            newLetter.classList.add('letters-section_add-letter-animation');
+            lettersSection.appendChild(newLetter);
+            newLetter.addEventListener('animationend', () => {
+                newLetter.classList.remove('letters-section_add-letter-animation');
+            });
+            letterCounterOnPage++;
+
+        }
+    }, 550);
+
+}
+
+function hideOtherLetters(currentReadableLetter) {
+    let letterSection = document.body.querySelectorAll('.letters-section__letter-wrapper');
+    let wrapperCurLetter = currentReadableLetter.parentNode.parentNode;
+    for (let i = 0; i < letterSection.length; i++) {
+        if (letterSection[i] !== wrapperCurLetter) {
+            letterSection[i].classList.add('non-displayed');
+        } else {
+            letterSection[i].querySelector('.opened-letter').classList.remove('non-displayed');
+            letterSection[i].querySelector('.covered-letter').classList.add('non-displayed');
+            letterSection[i].querySelector('.mail-box__hr-line').classList.add('non-displayed');
+        }
+    }
+}
+
+function showOtherLetters(currentClosableLetter) {
+    let letterSection = document.body.querySelectorAll('.letters-section__letter-wrapper');
+    let wrapperCurLetter = currentClosableLetter.parentNode.parentNode;
+    for (let i = 0; i < letterSection.length; i++) {
+        if (letterSection[i] !== wrapperCurLetter) {
+            letterSection[i].classList.remove('non-displayed');
+        } else {
+            letterSection[i].querySelector('.opened-letter').classList.add('non-displayed');
+            letterSection[i].querySelector('.covered-letter').classList.remove('non-displayed');
+            letterSection[i].querySelector('.mail-box__hr-line').classList.remove('non-displayed');
+        }
+    }
+}