Skip to content

Commit 0bf1047

Browse files
solarrustskorobaeusigsekor
authored
Добавляет баннер вверх сайта. Ссылка на исследование (#1250)
* Добавляет баннер вверх сайта * Добавляет условие для ссылки * Удаляет hidden * Использует гибкие стили для шрифта и кнопки * Отделяет глаза от зубов * Уменьшает мордашку для экранов поменбше * Увеличивает ссылку на мобильных, чтобы удобнее было нажимать пальцем * Возвращает hidden * Добавляет настройку для стилей * Добавляет скрипт для работы баннера * Меняет имя переменной * Меняет простой шаблон на макрос с шаблоном * Убирает баннер из базового шаблона * Добавляет баннер на все требуемые страницы * Добавляет условия для показа в отсутствии других баннеров * Добавляет дополнительное услловие для закрытого попапа --------- Co-authored-by: Svetlana Korobtseva <[email protected]> Co-authored-by: Igor Korovchenko <[email protected]>
1 parent 8109a13 commit 0bf1047

File tree

15 files changed

+184
-6
lines changed

15 files changed

+184
-6
lines changed

‎src/images/top-banner/bat-eyes.svg

Lines changed: 6 additions & 0 deletions
Loading

‎src/images/top-banner/bat-teeth.svg

Lines changed: 3 additions & 0 deletions
Loading

‎src/includes/blocks/top-banner.njk

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{% macro topBanner(isMainPage = false) %}
2+
<div class="top-banner notification" hidden>
3+
<p class="top-banner__content">Мы хотим понять, кто нас читает. Поможете нам? Займёт всего 5 минут.</p>
4+
<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>
5+
</div>
6+
{% endmacro %}

‎src/layouts/base.njk

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818

1919
</head>
2020
<body class="base__body {{ bodyClass }}">
21-
2221
{{ content | safe }}
2322

2423
{% include "blocks/cookie-notification.njk" %}

‎src/scripts/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import './modules/question-form.js'
1515
import './modules/subscribe-form.js'
1616
import './modules/code-line-numbers.js'
1717
import './modules/cookie-notification.js'
18+
import './modules/top-banner.js'
1819
import './modules/copy-code-snippet.js'
1920
import './modules/people.js'
2021
import './modules/filter-panel.js'

‎src/scripts/modules/top-banner.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
function init() {
2+
const banner = document.querySelector('.top-banner')
3+
const button = banner?.querySelector('.top-banner__button')
4+
const interval = 10000
5+
const visitedPagesKey = 'pages-list'
6+
const cookieNotificationKey = 'cookie-notification'
7+
const subscriptionPopupKey = 'subscription-form-status'
8+
9+
if (!banner && !button) {
10+
return
11+
}
12+
13+
const storageKey = 'top-banner'
14+
15+
try {
16+
const isBannerAccepted = JSON.parse(localStorage.getItem(storageKey))
17+
18+
if (isBannerAccepted) {
19+
return
20+
}
21+
22+
const visitedPages = localStorage.getItem(visitedPagesKey)
23+
const cookieNotification = localStorage.getItem(cookieNotificationKey)
24+
const subscriptionPopup = localStorage.getItem(subscriptionPopupKey)
25+
const pageList = visitedPages ? JSON.parse(visitedPages) : {}
26+
27+
let timer = setInterval(() => {
28+
if (pageList && cookieNotification && (subscriptionPopup === 'SHOWN' || subscriptionPopup === 'CLOSED')) {
29+
for (const key in pageList) {
30+
if (pageList[key].duration >= interval * 2) {
31+
banner.hidden = false
32+
clearInterval(timer)
33+
break
34+
}
35+
}
36+
}
37+
}, interval)
38+
} catch (error) {
39+
console.error(error)
40+
}
41+
42+
button.addEventListener(
43+
'click',
44+
() => {
45+
banner.hidden = true
46+
localStorage.setItem(storageKey, true)
47+
},
48+
{ once: true },
49+
)
50+
}
51+
52+
init()

‎src/styles/blocks/top-banner.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
.top-banner {
2+
position: relative;
3+
justify-content: space-between;
4+
align-items: center;
5+
padding-inline-start: 150px;
6+
color: #fff;
7+
background-color: #000;
8+
z-index: 999;
9+
}
10+
11+
.top-banner[hidden] {
12+
display: none;
13+
}
14+
15+
.top-banner::before {
16+
content: "";
17+
position: absolute;
18+
inset-inline-start: 15px;
19+
inset-block-start: calc(50% - 15px);
20+
inline-size: 120px;
21+
block-size: 30px;
22+
background-image: url("../../images/top-banner/bat-eyes.svg");
23+
background-repeat: no-repeat;
24+
background-position: center;
25+
background-size: contain;
26+
}
27+
28+
.top-banner::after {
29+
content: "";
30+
position: absolute;
31+
inset-inline-start: 45px;
32+
inset-block-end: -12px;
33+
inline-size: 60px;
34+
block-size: 13px;
35+
background-image: url("../../images/top-banner/bat-teeth.svg");
36+
background-repeat: no-repeat;
37+
background-position: center;
38+
background-size: contain;
39+
}
40+
41+
.top-banner__content {
42+
margin: 0;
43+
}
44+
45+
@media (width <= 1366px) {
46+
.top-banner {
47+
padding-inline-start: 110px;
48+
}
49+
50+
.top-banner::before {
51+
inset-block-start: calc(50% - 10px);
52+
inline-size: 80px;
53+
block-size: 20px;
54+
}
55+
56+
.top-banner::after {
57+
inset-inline-start: 33px;
58+
inset-block-end: -8px;
59+
inline-size: 45px;
60+
block-size: 9px;
61+
}
62+
}
63+
64+
@media (width <= 768px) {
65+
.top-banner {
66+
margin-block-end: 0;
67+
padding-inline-start: 15px;
68+
font-size: 14px;
69+
}
70+
71+
.top-banner::before, .top-banner::after {
72+
display: none;
73+
}
74+
75+
.top-banner__button {
76+
padding-block: 0.3em;
77+
}
78+
}

‎src/styles/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,4 @@
8888
@import url("blocks/subscribe-popup.css");
8989
@import url("blocks/subscribe-page.css");
9090
@import url("blocks/baseline.css");
91+
@import url("blocks/top-banner.css");

‎src/sw.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -424,7 +424,7 @@ self.addEventListener('sync', async (event) => {
424424
await putPagesInCache(
425425
syncFeaturedCacheName,
426426
featured.map((f) => f.link),
427-
false,
427+
true,
428428
)
429429
}
430430
})
@@ -435,22 +435,22 @@ self.addEventListener('message', async (event) => {
435435

436436
self.addEventListener('fetch', async (event) => {
437437
// Игнорирует запросы на другие домены
438-
if (!event.request.startsWith(self.location.origin) && event.request.method === 'POST') {
438+
if (!event.request.url.startsWith(self.location.origin) && event.request.method === 'POST') {
439439
return new Response(fetch(event.request))
440440
}
441441

442442
// Игнорирует кеширование Service Worker
443-
if (event.request.endsWith('sw.js')) {
443+
if (event.request.url.endsWith('sw.js')) {
444444
return new Response(fetch(event.request))
445445
}
446446

447447
// Игнорирует кеширование манифеста
448-
if (event.request.endsWith('manifest.json')) {
448+
if (event.request.url.endsWith('manifest.json')) {
449449
return new Response(fetch(event.request))
450450
}
451451

452452
// Игнорирует кеширование страниц с параметрами GET запроса
453-
if (event.request.indexOf('.html?') > -1 || event.request.indexOf('.js?') > -1) {
453+
if (event.request.url.indexOf('.html?') > -1 || event.request.url.indexOf('.js?') > -1) {
454454
return new Response(fetch(event.request))
455455
}
456456

‎src/views/article-index.njk

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
{% from "blocks/header.njk" import header with context %}
2+
{% from "blocks/top-banner.njk" import topBanner with context %}
23
{% from "blocks/footer.njk" import footer with context %}
34

45
{% set isLogoContrastColor = hasCategory %}
56

7+
{{ topBanner(
8+
isMainPage=false
9+
) }}
10+
611
{% set iconEditPlaceholder %}<span class="articles-group__placeholder-icon font-theme font-theme--code" aria-hidden="true"></span>{% endset %}
712

813
{{ header(

0 commit comments

Comments
 (0)