From e26f34d02f33b3cde3ab02b744a6997698b9b3a4 Mon Sep 17 00:00:00 2001 From: Scott Anderson Date: Thu, 10 Sep 2020 14:11:56 -0600 Subject: [PATCH] added js for notification cookies and interactions --- assets/js/notifications.js | 46 ++++++++++++++++++++++ assets/styles/layouts/_notifications.scss | 18 ++++++--- data/notifications.yaml | 27 ++++++------- layouts/partials/footer/javascript.html | 3 +- layouts/partials/footer/notifications.html | 6 ++- 5 files changed, 77 insertions(+), 23 deletions(-) create mode 100644 assets/js/notifications.js diff --git a/assets/js/notifications.js b/assets/js/notifications.js new file mode 100644 index 000000000..f04cdd810 --- /dev/null +++ b/assets/js/notifications.js @@ -0,0 +1,46 @@ +// Get notification cookie name +function notificationCookieName(el) { + return "influx-" + $(el).attr('id') + "-notification-seen" +} + +// Show notifications that are within scope and haven't been ssen +function showNotifications() { + $('#docs-notifications > .notification').each(function() { + + // Check if the path includes paths defined in the data-scope attribute + // of the notification html element + function inScope(path, scope) { + for(let i = 0; i < scope.length; i++){ + if (path.includes(scope[i])) { + return true; + }; + } + return false; + } + + var scope = $(this).data('scope').split(',') + var pageInScope = inScope(window.location.pathname, scope) + var notificationCookie = Cookies.get( notificationCookieName(this) ) + + if (pageInScope && notificationCookie != 'true') { + $(this).show().animate({right: 0, opacity: 1}, 200, 'swing') + } + }); +} + +// Hide a notification and set cookie as true +function hideNotification(el) { + $(el).closest('.notification').animate({height: 0, opacity: 0}, 200, 'swing', function(){ + $(this).hide(); + Cookies.set(notificationCookieName(this), true); + }); +} + +// Show notifications on page load +showNotifications() + +// Hide a notification and set see cookie to true +$('.close-notification').click(function(e) { + e.preventDefault(); + hideNotification(this); +}) \ No newline at end of file diff --git a/assets/styles/layouts/_notifications.scss b/assets/styles/layouts/_notifications.scss index 8e9f35a9f..ee834a5b9 100644 --- a/assets/styles/layouts/_notifications.scss +++ b/assets/styles/layouts/_notifications.scss @@ -1,20 +1,28 @@ #docs-notifications { - position: absolute; + position: fixed; top: 10px; right: 10px; z-index: 100; width: calc(100vw - 20px); max-width: 500px; + transition: all .4s ease; .notification { + display: none; // initial hidden state + right: -50px; // initial hidden state + opacity: 0; // initial hidden state + position: relative; - padding: 1.25rem 2.35rem .5rem 1.25rem; - margin-bottom: 10px; border-radius: $radius; - font-size: .95rem; - color: $g20-white; box-shadow: 2px 2px 6px rgba($g2-kevlar, .35); + .notification-content { + padding: 1.25rem 2.35rem .5rem 1.25rem; + margin-bottom: 10px; + font-size: .95rem; + color: $g20-white; + } + .close-notification { position: absolute; top: 8px; diff --git a/data/notifications.yaml b/data/notifications.yaml index e2621765a..b95e7a72e 100644 --- a/data/notifications.yaml +++ b/data/notifications.yaml @@ -1,23 +1,20 @@ -- id: influxdb-2-0-ga - level: note - scope: - - / - message: | - ### InfluxDB v2.0 is now GA!! +# Notification data structure +# +# - id: unqiue ID for notification, cannot start with digit, no spaces, a-z and 0-9 +# level: note or warn +# scope: +# - list of URL paths to show notification on, no scope shows everywhere +# message: | +# Markdown message content. - Get your upgrade on! - - [Upgrade from InfluxDB 1.x to 2.0](#) - -- id: beta-17-upgrade +- id: rc1-upgrade level: warn scope: - /influxdb/v2.0/ - - /influxdb/1.8/ message: | - ### Breaking changes in beta 17 + ### Breaking changes in v2.0 rc.1 - InfluxDB v2.0 beta 17 includes breaking changes that require a manual upgrade + InfluxDB v2.0 rc.1 includes breaking changes that require a manual upgrade from beta-16 and older. For information, see: - [Upgrade to beta 17](#) \ No newline at end of file + [Upgrade to v2.0 rc.1](#) \ No newline at end of file diff --git a/layouts/partials/footer/javascript.html b/layouts/partials/footer/javascript.html index 56ad03440..97df84c1d 100644 --- a/layouts/partials/footer/javascript.html +++ b/layouts/partials/footer/javascript.html @@ -3,7 +3,8 @@ {{ $searchInteractions := resources.Get "js/search-interactions.js" }} {{ $telegrafFilters := resources.Get "js/telegraf-filters.js" }} {{ $influxdbURLs := resources.Get "js/influxdb-url.js" }} -{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }} +{{ $notifications := resources.Get "js/notifications.js" }} +{{ $footerjs := slice $versionSelector $contentInteractions $searchInteractions $telegrafFilters $influxdbURLs $notifications | resources.Concat "js/footer.bundle.js" | resources.Fingerprint }}