diff --git a/src/images/top-banner/bat-eyes.svg b/src/images/top-banner/bat-eyes.svg new file mode 100644 index 000000000..fc91de573 --- /dev/null +++ b/src/images/top-banner/bat-eyes.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/images/top-banner/bat-teeth.svg b/src/images/top-banner/bat-teeth.svg new file mode 100644 index 000000000..6d4f16973 --- /dev/null +++ b/src/images/top-banner/bat-teeth.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/includes/blocks/top-banner.njk b/src/includes/blocks/top-banner.njk new file mode 100644 index 000000000..a1c6551f0 --- /dev/null +++ b/src/includes/blocks/top-banner.njk @@ -0,0 +1,6 @@ +{% macro topBanner(isMainPage = false) %} + +{% endmacro %} \ No newline at end of file diff --git a/src/layouts/base.njk b/src/layouts/base.njk index b63f64680..a2e932ff2 100644 --- a/src/layouts/base.njk +++ b/src/layouts/base.njk @@ -18,7 +18,6 @@ - {{ content | safe }} {% include "blocks/cookie-notification.njk" %} diff --git a/src/scripts/index.js b/src/scripts/index.js index 8cae93e2d..d0e683b47 100644 --- 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 new file mode 100644 index 000000000..aaed8a4d4 --- /dev/null +++ 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 new file mode 100644 index 000000000..ed62dac63 --- /dev/null +++ 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 index b633d0541..a72a8fd02 100644 --- 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 index 6b715c21d..9fb21f70d 100644 --- 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 index 594108894..e6267cc6b 100644 --- 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 %}{% endset %} {{ header( diff --git a/src/views/doc.njk b/src/views/doc.njk index 6bd805d6c..d05aab872 100644 --- 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 index 41f8f4abf..51d9251aa 100644 --- 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 index 1e4688ed4..2b59e9b96 100644 --- 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 index 7b3075357..71796dd59 100644 --- 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 %}
+ + {{ topBanner( + isMainPage=false + ) }} + {{ header( pageCategoryId='people', category=title, diff --git a/src/views/person.njk b/src/views/person.njk index 34be3d983..27aee5ed7 100644 --- 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 %}
+ + {{ topBanner( + isMainPage=false + ) }} + {{ header( pageCategoryId='people', category=categoryName,