feat: add centralized announcements #149

Iankodj · pepinho24 · commit 53669cdb997d · 2021-05-13T11:51:34.000+03:00
diff --git a/_assets/css/_styles.scss b/_assets/css/_styles.scss
@@ -332,32 +332,22 @@ nav.TK-Nav, .PRGS-PairNav {
 
 // Ribbon Announcement
 
-.SiteRibbon-text,
-.SiteRibbon-CTA {
-    display: inline;
-    vertical-align: middle;
-}
-
-.SiteRibbon {
-    margin-top: -95px;
-    top: 0;
-    position: relative;
-    padding: 20px 0 18px 0;
-    font-family: FaktSlabPro,Arial,Helvetica,sans-serif;
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 1.2;
-    text-align: center;
-    z-index: 50000;
-    color: #000;
-    background-color: #ffda3f;
+#announcement-banner {
+    width: 100%;
+    position: fixed;
+    z-index: 40000;
+    left: 0;
+    top: 61px;
 
-    .container {
-        position: relative;
-    }
+    .close-button-container {
+        position: absolute;
+        top: 19px;
+        right: 16px;
+        z-index: 100000;
 
-    + nav.TK-Nav, + .PRGS-PairNav {
-        margin-top: 0;
+        &:hover {
+            cursor: pointer;
+        }
     }
 }
 
diff --git a/_assets/js/announcement.js b/_assets/js/announcement.js
@@ -1,3 +1,57 @@
 $(document).ready(function () {
-    $('.js-r1dt').insertBefore($('#js-tlrk-nav')).end().show();
+    var banner = $("#announcement-banner");
+    var fallbackContent = $("#announcement-fallback").html();
+    var content = $("#announcement-content");
+    var button = $("#announcement-banner .close-button-container");
+    var url = content.data("url");
+    var storageKey = "T_DOCUMENTATION_announcement".toUpperCase();
+
+    // detect any user interaction
+    $("body").one("mousemove scroll touchstart", onUserInteraction);
+
+    function onUserInteraction () {
+        fetchAnnouncement();
+    }
+
+    function fetchAnnouncement () {
+        $.get(url).done(onSuccess).fail(onFail);
+    }
+
+    function onSuccess (data) {
+        tryRenderAnnouncement(data);
+    }
+
+    function onFail () {
+        if (fallbackContent) {
+            tryRenderAnnouncement(fallbackContent);
+        }
+    }
+
+    function tryRenderAnnouncement (html) {
+        if (!checkStorage(hash($(html).text()))) {
+            content.append(html);
+            banner.show();
+            button.one("click", hideAnnouncement);
+        }
+    }
+
+    function hideAnnouncement () {
+        saveStorage(hash(content.text()));
+        content.html("");
+        banner.hide();
+    }
+
+    function checkStorage (hash) {
+        var item = localStorage.getItem(storageKey);
+
+        return hash === item;
+    }
+
+    function saveStorage (hash) {
+        localStorage.setItem(storageKey, hash);
+    }
+
+    function hash (content) {return  "announcement-" + content.trim().split("").reduce(function(a,b){a=((a<<5)-a)+b.charCodeAt(0);return a&a},0) };
 });
+
+
diff --git a/_includes/announcement.html b/_includes/announcement.html
@@ -1,4 +1,18 @@
-<div class="SiteRibbon js-r1dt" style="display:none;"><div class="container">
-<span class="SiteRibbon-text">
-  {{page.announcement}}
-</span></div></div>
+<div id="announcement-banner" style="display: none">
+  <div id="announcement-content" data-url="{%if page.announcementUrl%}{{page.announcementUrl}}{%else%}https://docs.telerik.com/kendo-api/announcements{{site.baseurl}}{%endif%}">
+  </div>
+  <div class="close-button-container">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 27.23 26.588">
+      <g fill="none" stroke="rgba(0,0,0,0.5)" stroke-linecap="round" stroke-width="2">
+        <path d="M1.414 1.414l23.759 23.759M25.815 1.414L2.056 25.173"></path>
+      </g>
+    </svg>
+  </div>
+</div>
+{% if page.announcement %}
+<script id="announcement-fallback" type="text/fallback-announcement">
+  <style>.Ribbon { z-index: 50000; position: relative; padding: 20px 2% 18px; text-align: center; color: #000; background-color: #ffda3f; font: 300 20px/1.2 FaktSlabPro, Arial, Helvetica, sans-serif }</style>
+  <aside class="Ribbon">{{page.announcement}}</aside>
+</script>
+{% endif %}
+
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -4,9 +4,9 @@
    {% include _head.html %}
 
 <body role="document" class="layout-{{ page.layout }} brand">
-  {% if page.announcement %}{% include announcement.html %}{% endif %}
   {% include nav.html %}
   {% include _variables.html %}
+  {% include announcement.html %}
 <div id="content">
   {{ content }}
   <div id="push" class="pt-60 pb-40"></div> <!-- Sticky Footer -->
@@ -22,7 +22,7 @@
 {% if site.enable_dojo == true %} <script src="{{site.baseurl}}/assets/dojo.js?{{randomNumber}}" defer></script> {% endif %}
 {% if page.kind == "api" %} <script src="{{site.baseurl}}/assets/api-toc.js?{{randomNumber}}" defer></script>{% endif %}
 {% if page.sdk_example == true %}<script src="{{site.baseurl}}/assets/sdk-browser.js?{{randomNumber}}" defer></script>{% endif %}
-{% if page.announcement %}<script src="{{site.baseurl}}/assets/announcement.js?{{randomNumber}}" defer></script>{% endif %}
+<script src="{{site.baseurl}}/assets/announcement.js?{{randomNumber}}" defer></script>
   {% include footer.html %}
   <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" data-language="en" type="text/javascript" charset="UTF-8" {% if site.progress_hosting == true %} data-domain-script="f9397248-1dbe-47fc-9dbf-c50e7dd51096" {% else %} data-domain-script="3dfce4f2-dab6-4128-9f33-df7e0597da82" {%endif%} async></script>
   {% include _gtm.html %}
