Добавляет баннер вверх сайта. Ссылка на исследование (#1250)

* Добавляет баннер вверх сайта * Добавляет условие для ссылки * Удаляет hidden * Использует гибкие стили для шрифта и кнопки * Отделяет глаза от зубов * Уменьшает мордашку для экранов поменбше * Увеличивает ссылку на мобильных, чтобы удобнее было нажимать пальцем * Возвращает hidden * Добавляет настройку для стилей * Добавляет скрипт для работы баннера * Меняет имя переменной * Меняет простой шаблон на макрос с шаблоном * Убирает баннер из базового шаблона * Добавляет баннер на все требуемые страницы * Добавляет условия для показа в отсутствии других баннеров * Добавляет дополнительное услловие для закрытого попапа --------- Co-authored-by: Svetlana Korobtseva <[email protected]> Co-authored-by: Igor Korovchenko <[email protected]>
doka-guide · Mar 20, 2024 · 0bf1047 · 0bf1047
1 parent 8109a13
commit 0bf1047
Show file tree

Hide file tree

Showing 15 changed files with 184 additions and 6 deletions.
diff --git a/src/images/top-banner/bat-eyes.svg b/src/images/top-banner/bat-eyes.svg
diff --git a/src/images/top-banner/bat-teeth.svg b/src/images/top-banner/bat-teeth.svg
diff --git a/src/includes/blocks/top-banner.njk b/src/includes/blocks/top-banner.njk
@@ -0,0 +1,6 @@
+{% macro topBanner(isMainPage = false) %}
+<div class="top-banner notification" hidden>
+  <p class="top-banner__content">Мы хотим понять, кто нас читает. Поможете нам? Займёт всего 5 минут.</p>
+  <a class="top-banner__button notification__button button" target="_blank" rel="noreferrer nofollow" href="{% if isMainPage %}https://forms.yandex.ru/cloud/65f1aaf35d2a061e4ff460e0/?utm_source=doka_main{% else %}https://forms.yandex.ru/cloud/65f1aaf35d2a061e4ff460e0/?utm_source=doka_other{% endif %}">Пройти опрос</a>
+</div>
+{% endmacro %}
diff --git a/src/layouts/base.njk b/src/layouts/base.njk
@@ -18,7 +18,6 @@
 
   </head>
   <body class="base__body {{ bodyClass }}">
-
     {{ content | safe }}
 
     {% include "blocks/cookie-notification.njk" %}

diff --git a/src/scripts/index.js b/src/scripts/index.js
@@ -15,6 +15,7 @@ import './modules/question-form.js'
 import './modules/subscribe-form.js'
 import './modules/code-line-numbers.js'
 import './modules/cookie-notification.js'
+import './modules/top-banner.js'
 import './modules/copy-code-snippet.js'
 import './modules/people.js'
 import './modules/filter-panel.js'

diff --git a/src/scripts/modules/top-banner.js b/src/scripts/modules/top-banner.js
@@ -0,0 +1,52 @@
+function init() {
+  const banner = document.querySelector('.top-banner')
+  const button = banner?.querySelector('.top-banner__button')
+  const interval = 10000
+  const visitedPagesKey = 'pages-list'
+  const cookieNotificationKey = 'cookie-notification'
+  const subscriptionPopupKey = 'subscription-form-status'
+
+  if (!banner && !button) {
+    return
+  }
+
+  const storageKey = 'top-banner'
+
+  try {
+    const isBannerAccepted = JSON.parse(localStorage.getItem(storageKey))
+
+    if (isBannerAccepted) {
+      return
+    }
+
+    const visitedPages = localStorage.getItem(visitedPagesKey)
+    const cookieNotification = localStorage.getItem(cookieNotificationKey)
+    const subscriptionPopup = localStorage.getItem(subscriptionPopupKey)
+    const pageList = visitedPages ? JSON.parse(visitedPages) : {}
+
+    let timer = setInterval(() => {
+      if (pageList && cookieNotification && (subscriptionPopup === 'SHOWN' || subscriptionPopup === 'CLOSED')) {
+        for (const key in pageList) {
+          if (pageList[key].duration >= interval * 2) {
+            banner.hidden = false
+            clearInterval(timer)
+            break
+          }
+        }
+      }
+    }, interval)
+  } catch (error) {
+    console.error(error)
+  }
+
+  button.addEventListener(
+    'click',
+    () => {
+      banner.hidden = true
+      localStorage.setItem(storageKey, true)
+    },
+    { once: true },
+  )
+}
+
+init()
diff --git a/src/styles/blocks/top-banner.css b/src/styles/blocks/top-banner.css
@@ -0,0 +1,78 @@
+.top-banner {
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  padding-inline-start: 150px;
+  color: #fff;
+  background-color: #000;
+  z-index: 999;
+}
+
+.top-banner[hidden] {
+  display: none;
+}
+
+.top-banner::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: 15px;
+  inset-block-start: calc(50% - 15px);
+  inline-size: 120px;
+  block-size: 30px;
+  background-image: url("../../images/top-banner/bat-eyes.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.top-banner::after {
+  content: "";
+  position: absolute;
+  inset-inline-start: 45px;
+  inset-block-end: -12px;
+  inline-size: 60px;
+  block-size: 13px;
+  background-image: url("../../images/top-banner/bat-teeth.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+}
+
+.top-banner__content {
+  margin: 0;
+}
+
+@media (width <= 1366px) {
+  .top-banner {
+    padding-inline-start: 110px;
+  }
+
+  .top-banner::before {
+    inset-block-start: calc(50% - 10px);
+    inline-size: 80px;
+    block-size: 20px;
+  }
+
+  .top-banner::after {
+    inset-inline-start: 33px;
+    inset-block-end: -8px;
+    inline-size: 45px;
+    block-size: 9px;
+  }
+}
+
+@media (width <= 768px) {
+  .top-banner  {
+    margin-block-end: 0;
+    padding-inline-start: 15px;
+    font-size: 14px;
+  }
+
+  .top-banner::before, .top-banner::after {
+    display: none;
+  }
+
+  .top-banner__button {
+    padding-block: 0.3em;
+  }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -88,3 +88,4 @@
 @import url("blocks/subscribe-popup.css");
 @import url("blocks/subscribe-page.css");
 @import url("blocks/baseline.css");
+@import url("blocks/top-banner.css");
diff --git a/src/sw.js b/src/sw.js
@@ -424,7 +424,7 @@ self.addEventListener('sync', async (event) => {
     await putPagesInCache(
       syncFeaturedCacheName,
       featured.map((f) => f.link),
-      false,
+      true,
     )
   }
 })
@@ -435,22 +435,22 @@ self.addEventListener('message', async (event) => {
 
 self.addEventListener('fetch', async (event) => {
   // Игнорирует запросы на другие домены
-  if (!event.request.startsWith(self.location.origin) && event.request.method === 'POST') {
+  if (!event.request.url.startsWith(self.location.origin) && event.request.method === 'POST') {
     return new Response(fetch(event.request))
   }
 
   // Игнорирует кеширование Service Worker
-  if (event.request.endsWith('sw.js')) {
+  if (event.request.url.endsWith('sw.js')) {
     return new Response(fetch(event.request))
   }
 
   // Игнорирует кеширование манифеста
-  if (event.request.endsWith('manifest.json')) {
+  if (event.request.url.endsWith('manifest.json')) {
     return new Response(fetch(event.request))
   }
 
   // Игнорирует кеширование страниц с параметрами GET запроса
-  if (event.request.indexOf('.html?') > -1 || event.request.indexOf('.js?') > -1) {
+  if (event.request.url.indexOf('.html?') > -1 || event.request.url.indexOf('.js?') > -1) {
     return new Response(fetch(event.request))
   }
 

diff --git a/src/views/article-index.njk b/src/views/article-index.njk
@@ -1,8 +1,13 @@
 {% from "blocks/header.njk" import header with context %}
+{% from "blocks/top-banner.njk" import topBanner with context %}
 {% from "blocks/footer.njk" import footer with context %}
 
 {% set isLogoContrastColor = hasCategory %}
 
+{{ topBanner(
+  isMainPage=false
+) }}
+
 {% set iconEditPlaceholder %}<span class="articles-group__placeholder-icon font-theme font-theme--code" aria-hidden="true"></span>{% endset %}
 
 {{ header(

diff --git a/src/views/doc.njk b/src/views/doc.njk
@@ -1,10 +1,15 @@
 {% from "blocks/header.njk" import header with context %}
+{% from "blocks/top-banner.njk" import topBanner with context %}
 {% from "blocks/footer.njk" import footer with context %}
 {% from "blocks/article-image.njk" import articleImage %}
 {% from "blocks/linked-article.njk" import linkedArticle %}
 
 {% set isLogoContrastColor = hasCategory %}
 
+{{ topBanner(
+  isMainPage=false
+) }}
+
 {{ header(
   pageCategoryId=category,
   category=categoryName,

diff --git a/src/views/index.njk b/src/views/index.njk
@@ -1,9 +1,14 @@
 {% from "blocks/header.njk" import header with context %}
+{% from "blocks/top-banner.njk" import topBanner with context %}
 {% from "blocks/footer.njk" import footer with context %}
 {% from "promos/" + promoData.design + ".njk" import promo with context %}
 
 {% set isLogoContrastColor = hasCategory %}
 
+{{ topBanner(
+  isMainPage=true
+) }}
+
 {{ header(
   isLogoContrastColor=isLogoContrastColor,
   isMainPage=true

diff --git a/src/views/page.njk b/src/views/page.njk
@@ -1,8 +1,13 @@
 {% from "blocks/header.njk" import header with context %}
+{% from "blocks/top-banner.njk" import topBanner with context %}
 {% from "blocks/footer.njk" import footer with context %}
 
 {% set isLogoContrastColor = hasCategory %}
 
+{{ topBanner(
+  isMainPage=false
+) }}
+
 {{ header(
   title=title,
   isLogoContrastColor=isLogoContrastColor

diff --git a/src/views/people.njk b/src/views/people.njk
@@ -1,4 +1,5 @@
 {% from "blocks/header.njk" import header with context %}
+{% from "blocks/top-banner.njk" import topBanner with context %}
 {% from "blocks/footer.njk" import footer with context %}
 {% from "blocks/person.njk" import person %}
 
@@ -22,6 +23,11 @@
 {% endmacro %}
 
 <div class="people-page">
+
+  {{ topBanner(
+    isMainPage=false
+  ) }}
+
   {{ header(
     pageCategoryId='people',
     category=title,

diff --git a/src/views/person.njk b/src/views/person.njk
@@ -1,4 +1,5 @@
 {% from "blocks/header.njk" import header with context %}
+{% from "blocks/top-banner.njk" import topBanner with context %}
 {% from "blocks/footer.njk" import footer with context %}
 {% from "blocks/person-avatar.njk" import personAvatar %}
 {% from "blocks/person-badges.njk" import personBadges %}
@@ -57,6 +58,11 @@
 {% endset %}
 
 <div class="person-page">
+
+  {{ topBanner(
+    isMainPage=false
+  ) }}
+
   {{ header(
     pageCategoryId='people',
     category=categoryName,