From 48a6d2ddc3e5ce215beddd6369f01598651ad216 Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Thu, 21 Dec 2023 09:23:22 +0100
Subject: [PATCH] blackout

---
 src/annoy/static/annoy/banner.js              | 10 +--
 .../templates/annoy/banner_blackout.html      | 40 ++++++++++
 src/annoy/templatetags/annoy.py               |  8 ++
 .../templates/catalogue/preview_ad.html       |  8 +-
 .../catalogue/preview_ad_homepage.html        |  2 +
 .../templates/catalogue/viewer_base.html      |  4 +-
 src/wolnelektury/settings/static.py           |  1 +
 .../static/2022/styles/layout/_annoy.scss     | 73 +++++++++++++++++++
 src/wolnelektury/templates/header.html        |  3 +
 9 files changed, 138 insertions(+), 11 deletions(-)
 create mode 100644 src/annoy/templates/annoy/banner_blackout.html
 create mode 100644 src/wolnelektury/static/2022/styles/layout/_annoy.scss

diff --git a/src/annoy/static/annoy/banner.js b/src/annoy/static/annoy/banner.js
index 44a1d0223..74a7292e6 100644
--- a/src/annoy/static/annoy/banner.js
+++ b/src/annoy/static/annoy/banner.js
@@ -22,12 +22,10 @@
                 _paq.push(['trackEvent', 'banner', 'banner-hide', $target.attr('id')]);
             });
 
-            if (Modernizr.localstorage) {
-                if (!localStorage[tag]) {
-                    $on.hide();
-                    $target.show();
-                    _paq.push(['trackEvent', 'banner', 'banner-show', $target.attr('id')]);
-                }
+            if (!localStorage[tag]) {
+                $on.hide();
+                $target.show();
+                _paq.push(['trackEvent', 'banner', 'banner-show', $target.attr('id')]);
             }
         });
 
diff --git a/src/annoy/templates/annoy/banner_blackout.html b/src/annoy/templates/annoy/banner_blackout.html
new file mode 100644
index 000000000..c96751f38
--- /dev/null
+++ b/src/annoy/templates/annoy/banner_blackout.html
@@ -0,0 +1,40 @@
+{% if banner %}
+  {% if closable %}
+    <a class='annoy-banner-on annoy-banner-on_{{ banner.place }}'
+       href="{{ banner.url }}"
+       data-target="#annoy-banner-{{ banner.id }}"
+    >
+    </a>
+  {% endif %}
+  <div class="
+              annoy-banner
+              annoy-banner_{{ banner.place }}
+              annoy-banner-style_{{ banner.style }}
+              {% if banner.image %}with-image{% endif %}
+              {% if banner.smallfont %}banner-smallfont{% endif %}
+              "
+       id="annoy-banner-{{ banner.id }}"
+	      style="
+              {% if banner.text_color %}color: {{ banner.text_color }};{% endif %}
+              {% if banner.background_color %}background-color: {{ banner.background_color }};{% endif %}
+              ">
+    <div class="annoy-banner-inner">
+
+      <div class="text">
+        {{ banner.get_text|safe|linebreaks }}
+        <div class="annoy-banner_actions">
+          <a class="action l-button l-button--default l-button--default--dark" href="{{ banner.url }}">
+            {{ banner.action_label }}
+          </a>
+          <a class='annoy-banner-off annoy-banner-off_{{ banner.place }}  l-button l-button--default'>{{ banner.close_label|default:"x" }}</a>
+        </div>
+      </div>
+      {% if banner.image %}
+        <div class="annoy-banner_img">
+          <img src="{{ banner.image.url }}">
+        </div>
+      {% endif %}
+    </div>
+  </div>
+
+{% endif %}
diff --git a/src/annoy/templatetags/annoy.py b/src/annoy/templatetags/annoy.py
index 21f1bb85e..2bc93143c 100644
--- a/src/annoy/templatetags/annoy.py
+++ b/src/annoy/templatetags/annoy.py
@@ -14,6 +14,14 @@ def annoy_banner(context, place):
         'closable': PLACES.get(place, False),
     }
 
+@register.inclusion_tag('annoy/banner_blackout.html', takes_context=True)
+def annoy_banner_blackout(context):
+    banners = Banner.choice('blackout', request=context['request'])
+    return {
+        'banner': banners.first(),
+        'closable': True,
+    }
+
 
 @register.inclusion_tag('annoy/banners.html', takes_context=True)
 def annoy_banners(context, place):
diff --git a/src/catalogue/templates/catalogue/preview_ad.html b/src/catalogue/templates/catalogue/preview_ad.html
index b2c24462c..5cfbb1222 100644
--- a/src/catalogue/templates/catalogue/preview_ad.html
+++ b/src/catalogue/templates/catalogue/preview_ad.html
@@ -16,9 +16,11 @@
   </div>
   <div class="l-navigation__menu__book__info">
     <h3>
-      <a href="{{ book.get_absolute_url }}" tabindex="-1">
-        <img src="{{ book.cover_clean.url }}" alt="{{ book.pretty_title }}">
-      </a>
+      {% if book.cover_clean %}
+        <a href="{{ book.get_absolute_url }}" tabindex="-1">
+          <img src="{{ book.cover_clean.url }}" alt="{{ book.pretty_title }}">
+        </a>
+      {% endif %}
       <a href="{{ book.get_absolute_url }}" tabindex="-1">
         {% for author in book.authors %}
           {{ author }}
diff --git a/src/catalogue/templates/catalogue/preview_ad_homepage.html b/src/catalogue/templates/catalogue/preview_ad_homepage.html
index 7ed69cde2..7755a89a0 100644
--- a/src/catalogue/templates/catalogue/preview_ad_homepage.html
+++ b/src/catalogue/templates/catalogue/preview_ad_homepage.html
@@ -4,11 +4,13 @@
     <h3>{% trans "Prapremiera" %}</h3>
     <div class="p-homepage-prapremiera__box">
       <div class="p-homepage-prapremiera__box__item">
+        {% if book.cover_clean %}
         <figure>
           <a href="{{ book.get_absolute_url }}">
             <img src="{{ book.cover_clean.url }}" alt="{{ book.pretty_title }}">
           </a>
         </figure>
+        {% endif %}
         <div class="p-homepage-prapremiera__box__content">
           <h4>
             {% for author in book.authors %}
diff --git a/src/catalogue/templates/catalogue/viewer_base.html b/src/catalogue/templates/catalogue/viewer_base.html
index b30e5329c..108fca615 100644
--- a/src/catalogue/templates/catalogue/viewer_base.html
+++ b/src/catalogue/templates/catalogue/viewer_base.html
@@ -3,7 +3,7 @@
 {% load static from static %}
 {% load pipeline %}
 {% load piwik_tags %}
-{% load annoy_banner from annoy %}
+{% load annoy %}
 <html class="no-js {% if VARIANT %}{{ VARIANT }}{% endif %}">
   <head>
     <meta charset="utf-8">
@@ -15,7 +15,7 @@
     {% tracking_code %}
   </head>
   <body id="{% block body-id %}reader{% endblock %}">
-    {% annoy_banner 'blackout' %}
+    {% annoy_banner_blackout %}
     {% annoy_banner 'top' %}
     <nav id="no-menu"><ul>
       <li><a href="#" id="menu-toggle-on"></a></li>
diff --git a/src/wolnelektury/settings/static.py b/src/wolnelektury/settings/static.py
index d56141d0b..584d71e16 100644
--- a/src/wolnelektury/settings/static.py
+++ b/src/wolnelektury/settings/static.py
@@ -65,6 +65,7 @@ PIPELINE = {
 
                 'js/contrib/jquery.cycle2.min.js',
                 'sponsors/js/sponsors.js',
+                'annoy/banner.js',
 
                 'js/contrib/jquery.countdown.js', 'js/contrib/jquery.countdown-pl.js',
                 'js/contrib/jquery.countdown-de.js', 'js/contrib/jquery.countdown-uk.js',
diff --git a/src/wolnelektury/static/2022/styles/layout/_annoy.scss b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
new file mode 100644
index 000000000..432ee4d0c
--- /dev/null
+++ b/src/wolnelektury/static/2022/styles/layout/_annoy.scss
@@ -0,0 +1,73 @@
+.annnoy-banner-on {
+    display: none;
+}
+
+.annoy-banner_blackout {
+    //display: flex;
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background: linear-gradient(180deg, rgba(0,0,0,1) 90%, rgba(0,0, 0,.5) 100%);
+
+    .annoy-banner-inner {
+        overflow-y: auto;
+        padding: 0 0 30px 0;
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+    }
+    .annoy-banner_actions {
+        display: flex;
+        flex-direction: column;
+        gap: 40px;
+    }
+    .annoy-banner_img {
+        flex: 1;
+        text-align: center;
+        img {
+            max-height: 100%;
+            max-width: 100%;
+        }
+    }
+    .text {
+        display: flex;
+        padding: 6px 30px;
+        flex: 1;
+        gap: 40px;
+        flex-direction: column;
+        color: white;
+        p {
+            font-size: 24px;
+        }
+    }
+    .action {
+        font-size: 1.6rem !important;
+    }
+    .annoy-banner-off {
+        font-size: 1.2rem !important;
+    }
+    
+    @include rwd($break-flow) {
+        .annoy-banner-inner {
+            padding: 0;
+            margin: 10vh 10vw 20vh 10vw;
+            flex-direction: row;
+            overflow-y: unset;
+
+            .text {
+                padding: 0 20px 0 0;
+                overflow-y: auto;
+            }
+        }
+        .action {
+
+        }
+        .annoy-banner-off {
+            
+        }
+    }
+}
diff --git a/src/wolnelektury/templates/header.html b/src/wolnelektury/templates/header.html
index 805babfdb..e7a29b807 100644
--- a/src/wolnelektury/templates/header.html
+++ b/src/wolnelektury/templates/header.html
@@ -1,3 +1,4 @@
+{% load annoy %}
 {% load cache %}
 {% load i18n %}
 {% load static %}
@@ -5,6 +6,8 @@
 {% load latest_blog_posts from blog %}
 {% load preview_ad from catalogue_tags %}
 
+{% annoy_banner_blackout %}
+
 <nav class="l-navigation">
   <div class="l-container">
     <a href="/" class="l-navigation__logo">
-- 
2.20.1